/* /Components/DateRangePicker.razor.rz.scp.css */
.drp-root[b-sdqqymhyzj] {
    position: relative;
    display: inline-block;
}

.drp-trigger[b-sdqqymhyzj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
    background: var(--ds-bg-app, #0f172a);
    color: var(--ds-text, #e2e8f0);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    line-height: 1.2;
    font-family: inherit;
}

.drp-dates[b-sdqqymhyzj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.drp-date[b-sdqqymhyzj] {
    font-variant-numeric: tabular-nums;
}

.drp-trigger-icon[b-sdqqymhyzj] {
    color: #34d399;
    font-size: 14px;
    flex-shrink: 0;
}

.drp-sep-icon[b-sdqqymhyzj] {
    color: #64748b;
    font-size: 11px;
    flex-shrink: 0;
}

.drp-chevron[b-sdqqymhyzj] {
    color: #00c49a;
    font-size: 11px;
    margin-left: 2px;
    flex-shrink: 0;
    opacity: 0.9;
}

.drp-trigger:hover:not(:disabled)[b-sdqqymhyzj] {
    border-color: rgba(52, 211, 153, 0.45);
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.12);
}

.drp-trigger:disabled[b-sdqqymhyzj] {
    opacity: 0.45;
    cursor: not-allowed;
}

.drp-trigger i[b-sdqqymhyzj] {
    color: #34d399;
    font-size: 14px;
}

.drp-trigger .drp-sep-icon[b-sdqqymhyzj],
.drp-trigger .drp-chevron[b-sdqqymhyzj] {
    color: inherit;
}

.drp-trigger .drp-trigger-icon[b-sdqqymhyzj] {
    color: #34d399;
}

.drp-backdrop[b-sdqqymhyzj] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.drp-popover[b-sdqqymhyzj] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 3000;
    width: min(300px, 92vw);
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
    background: var(--ds-bg-elevated, #1c2330);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.drp-quick[b-sdqqymhyzj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ds-border, rgba(255, 255, 255, 0.08));
}

.drp-quick-btn[b-sdqqymhyzj] {
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.25);
    background: rgba(52, 211, 153, 0.08);
    color: #6ee7b7;
    cursor: pointer;
}

.drp-quick-btn:hover[b-sdqqymhyzj] {
    background: rgba(52, 211, 153, 0.18);
}

.drp-head[b-sdqqymhyzj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.drp-month[b-sdqqymhyzj] {
    font-size: 13px;
    font-weight: 800;
    color: var(--ds-text, #e2e8f0);
    text-transform: capitalize;
}

.drp-nav[b-sdqqymhyzj] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.drp-nav:hover[b-sdqqymhyzj] {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
}

.drp-weekdays[b-sdqqymhyzj],
.drp-grid[b-sdqqymhyzj] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.drp-weekdays[b-sdqqymhyzj] {
    margin-bottom: 4px;
}

.drp-weekday[b-sdqqymhyzj] {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    padding: 2px 0;
}

.drp-day[b-sdqqymhyzj] {
    aspect-ratio: 1;
    min-height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text, #e2e8f0);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.drp-day:hover:not(:disabled)[b-sdqqymhyzj] {
    background: rgba(52, 211, 153, 0.12);
}

.drp-day--muted[b-sdqqymhyzj] {
    color: #4b5563;
}

.drp-day--today[b-sdqqymhyzj] {
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.55);
}

.drp-day--start[b-sdqqymhyzj],
.drp-day--end[b-sdqqymhyzj] {
    background: #34d399;
    color: #052e16;
}

.drp-day--in-range[b-sdqqymhyzj] {
    background: rgba(52, 211, 153, 0.18);
    color: #a7f3d0;
}

.drp-hint[b-sdqqymhyzj] {
    margin-top: 10px;
    font-size: 10px;
    color: #64748b;
    line-height: 1.35;
}

.drp-footer[b-sdqqymhyzj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border, rgba(255, 255, 255, 0.08));
}

.drp-btn[b-sdqqymhyzj] {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
    background: transparent;
    color: #94a3b8;
}

.drp-btn--apply[b-sdqqymhyzj] {
    border: none;
    background: #34d399;
    color: #052e16;
}

.drp-btn--apply:disabled[b-sdqqymhyzj] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/VolchicLogo.razor.rz.scp.css */
.volchic-logo[b-4paz1jbtqn] {
    --volchic-logo-height: 40px;
    color: var(--volchic-logo-color, #ffffff);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: relative;
    flex-shrink: 0;
}

.volchic-logo-svg[b-4paz1jbtqn] {
    height: var(--volchic-logo-height);
    width: auto;
    display: block;
    color: var(--volchic-logo-color, #ffffff);
}

/* SVG servi en <img> : teinte via filter approximatif si besoin — prefer mask */
.volchic-logo-svg[b-4paz1jbtqn] {
    filter: none;
}

.volchic-logo--sidebar[b-4paz1jbtqn] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.volchic-logo--sidebar .volchic-logo-svg[b-4paz1jbtqn] {
    height: 40px;
    width: auto;
}

.volchic-logo--sidebar .volchic-logo-wordmark[b-4paz1jbtqn] {
    font-size: 1.15rem;
}

.volchic-logo--sidebar .volchic-logo-sub[b-4paz1jbtqn] {
    margin-left: 0;
}

.volchic-logo-wordmark[b-4paz1jbtqn] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--volchic-logo-color, #fff);
    line-height: 1.1;
}

.volchic-logo--login[b-4paz1jbtqn] {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin: 0;
    width: auto;
}

.volchic-logo--login .volchic-logo-svg[b-4paz1jbtqn] {
    height: var(--volchic-logo-height, 44px);
    width: auto;
    flex-shrink: 0;
}

.volchic-logo-img[b-4paz1jbtqn] {
    display: block;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

.volchic-logo-img--sidebar[b-4paz1jbtqn] {
    height: 44px;
    max-width: 140px;
}

.volchic-logo-img--login[b-4paz1jbtqn] {
    height: var(--volchic-logo-height, 72px);
    max-width: 200px;
}

.volchic-logo-img--full[b-4paz1jbtqn] {
    max-height: 88px;
    max-width: 220px;
}

.volchic-logo--login .volchic-logo-wordmark[b-4paz1jbtqn] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--volchic-logo-color, var(--ds-text, #fffefb));
}

.volchic-logo--wordmark-only.volchic-logo--login[b-4paz1jbtqn] {
    gap: 0;
}

.volchic-logo--wordmark-only.volchic-logo--login .volchic-logo-wordmark[b-4paz1jbtqn] {
    font-size: 1.75rem;
    letter-spacing: -0.05em;
    text-transform: none;
}

.volchic-logo--wordmark-only.volchic-logo--sidebar .volchic-logo-wordmark[b-4paz1jbtqn] {
    font-size: 1.25rem;
    letter-spacing: -0.03em;
}

html[data-theme="light"] .volchic-logo--login .volchic-logo-wordmark[b-4paz1jbtqn] {
    color: var(--volchic-logo-color, #1c1917);
}

.volchic-logo--full .volchic-logo-img--full[b-4paz1jbtqn] {
    max-height: 88px;
    width: auto;
    border-radius: 12px;
}

.volchic-logo-svg--full[b-4paz1jbtqn] {
    height: 72px !important;
}

.volchic-logo-sub[b-4paz1jbtqn] {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ds-text-muted, rgba(255, 237, 213, 0.55));
    font-weight: 500;
}

.volchic-logo-color-wrap[b-4paz1jbtqn] {
    position: relative;
    margin-left: auto;
}

.volchic-logo-color-btn[b-4paz1jbtqn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ds-text-sub, #94a3b8);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.volchic-logo-color-btn:hover[b-4paz1jbtqn] {
    background: rgba(255, 255, 255, 0.12);
    color: var(--volchic-logo-color, #fff);
}

.volchic-logo-picker[b-4paz1jbtqn] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    min-width: 200px;
    padding: 12px;
    background: var(--ds-bg-elevated, #1e293b);
    border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.volchic-logo-picker-title[b-4paz1jbtqn] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-sub);
    margin-bottom: 10px;
}

.volchic-logo-swatches[b-4paz1jbtqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.volchic-logo-swatch[b-4paz1jbtqn] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.volchic-logo-swatch.active[b-4paz1jbtqn] {
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.35);
}

.volchic-logo-picker-custom[b-4paz1jbtqn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--ds-text-sub);
    margin-bottom: 8px;
}

.volchic-logo-picker-custom input[type="color"][b-4paz1jbtqn] {
    width: 40px;
    height: 28px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.volchic-logo-reset[b-4paz1jbtqn] {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text-sub);
    cursor: pointer;
}

.volchic-logo-reset:hover[b-4paz1jbtqn] {
    color: var(--ds-text);
    border-color: var(--volchic-logo-color, #fff);
}
/* /Layout/EmptyLayout.razor.rz.scp.css */
.empty-layout[b-6j0691wvjj] {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Notification Panel — scoped to MainLayout
   ═══════════════════════════════════════════════════════════════ */

/* ── Badge on bell button ──────────────────────────────────────── */
[b-8eywnik994] .notif-badge-num {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--ds-sidebar-bg, #0f1623);
    animation: notif-pop-b-8eywnik994 .25s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}

@keyframes notif-pop-b-8eywnik994 {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

[b-8eywnik994] .ds-icon-btn.has-notif {
    color: #fbbf24;
}

/* ── Panel container ───────────────────────────────────────────── */
[b-8eywnik994] .notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    background: var(--ds-card-bg, #1a2236);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.3);
    z-index: 200;
    overflow: hidden;
    animation: notif-slide-b-8eywnik994 .2s cubic-bezier(.22, 1, .36, 1);
}

@keyframes notif-slide-b-8eywnik994 {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ────────────────────────────────────────────────────── */
[b-8eywnik994] .notif-panel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem .75rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

[b-8eywnik994] .notif-panel-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--ds-text-primary, #f1f5f9);
    display: flex;
    align-items: center;
    gap: .4rem;
}

[b-8eywnik994] .notif-panel-title i { color: #fbbf24; }

[b-8eywnik994] .notif-read-all {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: transparent;
    border: none;
    color: #6366f1;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: background .15s;
}
[b-8eywnik994] .notif-read-all:hover { background: rgba(99,102,241,.12); }

/* ── Tabs ──────────────────────────────────────────────────────── */
[b-8eywnik994] .notif-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

[b-8eywnik994] .notif-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .6rem .4rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ds-text-muted, #94a3b8);
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
[b-8eywnik994] .notif-tab:hover { color: var(--ds-text-primary, #f1f5f9); }
[b-8eywnik994] .notif-tab.active {
    color: var(--ds-text-primary, #f1f5f9);
    border-bottom-color: #6366f1;
}

[b-8eywnik994] .notif-tab-cnt {
    padding: .05rem .38rem;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.4;
}
[b-8eywnik994] .notif-tab-cnt.obj   { background: rgba(245,158,11,.2);  color: #fbbf24; }
[b-8eywnik994] .notif-tab-cnt.task  { background: rgba(99,102,241,.2);  color: #a5b4fc; }
[b-8eywnik994] .notif-tab-cnt.stock { background: rgba(239,68,68,.2);   color: #fca5a5; }
[b-8eywnik994] .notif-tab-cnt.order { background: rgba(0,168,132,.2);  color: #6ee7b7; }
[b-8eywnik994] .notif-tab-cnt.chat  { background: rgba(37,211,102,.2); color: #25d366; }

[b-8eywnik994] .notif-item.chat-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
}

[b-8eywnik994] .notif-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
}

[b-8eywnik994] .notif-agent-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    background: rgba(0,168,132,.12);
    color: #6ee7b7;
    border: 1px solid rgba(0,168,132,.25);
}

[b-8eywnik994] .notif-item.order-item .notif-item-title {
    font-weight: 700;
}

/* ── Body scroll area ──────────────────────────────────────────── */
[b-8eywnik994] .notif-body {
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
[b-8eywnik994] .notif-body::-webkit-scrollbar { width: 4px; }
[b-8eywnik994] .notif-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* ── Single notification item ──────────────────────────────────── */
[b-8eywnik994] .notif-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    text-decoration: none;
    color: inherit;
    transition: background .14s;
    position: relative;
}
[b-8eywnik994] .notif-item:last-child { border-bottom: none; }
[b-8eywnik994] .notif-item:hover { background: rgba(255,255,255,.04); }

[b-8eywnik994] .notif-item.stock-item { cursor: pointer; }

[b-8eywnik994] .notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

[b-8eywnik994] .notif-icon.crit { animation: notif-pulse-b-8eywnik994 2s infinite; }

@keyframes notif-pulse-b-8eywnik994 {
    0%, 100% { opacity: 1; }
    50%       { opacity: .65; }
}

[b-8eywnik994] .notif-item-body {
    flex: 1;
    min-width: 0;
}

[b-8eywnik994] .notif-item-title {
    font-size: .84rem;
    font-weight: 600;
    color: var(--ds-text-primary, #f1f5f9);
    line-height: 1.3;
}

[b-8eywnik994] .notif-item-sub {
    font-size: .74rem;
    color: var(--ds-text-muted, #94a3b8);
    margin-top: .15rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Priority badges in tasks */
[b-8eywnik994] .notif-priority-badge {
    padding: .05rem .35rem;
    border-radius: 5px;
    font-size: .68rem;
    font-weight: 700;
}
[b-8eywnik994] .notif-priority-badge.high { background: rgba(249,115,22,.2); color: #fb923c; }
[b-8eywnik994] .notif-priority-badge.crit { background: rgba(239,68,68,.2);  color: #f87171; }

/* ── Dismiss button ────────────────────────────────────────────── */
[b-8eywnik994] .notif-dismiss {
    background: transparent;
    border: none;
    color: var(--ds-text-muted, #94a3b8);
    cursor: pointer;
    padding: .2rem .3rem;
    border-radius: 5px;
    font-size: .85rem;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: .05rem;
}
[b-8eywnik994] .notif-item:hover .notif-dismiss { opacity: 1; }
[b-8eywnik994] .notif-dismiss:hover { background: rgba(239,68,68,.15); color: #f87171; }

/* ── Task check circle ─────────────────────────────────────────── */
[b-8eywnik994] .notif-task-check {
    background: transparent;
    border: none;
    color: rgba(148,163,184,.4);
    cursor: pointer;
    padding: .2rem;
    font-size: 1rem;
    transition: color .15s, transform .15s;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: .1rem;
}
[b-8eywnik994] .notif-task-check:hover { color: #22c55e; transform: scale(1.2); }

/* ── Add task form ─────────────────────────────────────────────── */
[b-8eywnik994] .notif-add-task {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}

[b-8eywnik994] .notif-task-input {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: .45rem .75rem;
    color: var(--ds-text-primary, #f1f5f9);
    font-size: .83rem;
    outline: none;
    transition: border-color .15s;
}
[b-8eywnik994] .notif-task-input::placeholder { color: rgba(148,163,184,.5); }
[b-8eywnik994] .notif-task-input:focus { border-color: #6366f1; }

[b-8eywnik994] .notif-task-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #6366f1;
    border: none;
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: filter .15s, transform .15s;
}
[b-8eywnik994] .notif-task-add-btn:hover:not(:disabled) { filter: brightness(1.15); transform: scale(1.05); }
[b-8eywnik994] .notif-task-add-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Empty state ───────────────────────────────────────────────── */
[b-8eywnik994] .notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.25rem 1rem;
    color: var(--ds-text-muted, #94a3b8);
    font-size: .84rem;
}
[b-8eywnik994] .notif-empty i { font-size: 1.5rem; opacity: .4; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    [b-8eywnik994] .notif-panel {
        width: calc(100vw - 2rem);
        right: -1rem;
    }
}

[b-8eywnik994] .notif-rh-open {
    margin-left: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c9a227;
    text-decoration: underline;
    cursor: pointer;
}
/* /Layout/NavItem.razor.rz.scp.css */
/* NavItem styles are defined globally in NavMenu.razor.css */
/* /Layout/NavMenu.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   VOLCHIC CRM — Sidebar navigation (orange & neutres chauds)
   ═══════════════════════════════════════════════════════ */

/* ── Brand ─────────────────────────────────────────── */
.vnav-brand[b-8g5eat25sb] {
    display: flex;
    align-items: flex-start;
    padding: 1rem 0.85rem 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: .25rem;
}

.vnav-brand[b-8g5eat25sb]  .volchic-logo {
    width: 100%;
    flex-wrap: wrap;
}

.vnav-brand[b-8g5eat25sb]  .volchic-logo-sub {
    width: 100%;
    margin-top: 2px;
}

/* ── User card ──────────────────────────────────────── */
.vnav-user-card[b-8g5eat25sb] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: .5rem .75rem .75rem;
    padding: .6rem .75rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
}

.vnav-user-block[b-8g5eat25sb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.vnav-logout[b-8g5eat25sb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    margin: 0;
    padding: .35rem .5rem;
    border: 1px solid rgba(248, 113, 113, .35);
    border-radius: 8px;
    background: rgba(248, 113, 113, .1);
    color: #fecaca;
    font-size: .68rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.vnav-logout:hover[b-8g5eat25sb] {
    background: rgba(248, 113, 113, .18);
    border-color: rgba(248, 113, 113, .5);
    color: #fff;
}

.vnav-logout i[b-8g5eat25sb] {
    font-size: .75rem;
}

.vnav-user-avatar[b-8g5eat25sb] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f97316, #c2410c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.vnav-user-name[b-8g5eat25sb] {
    font-size: .78rem;
    font-weight: 600;
    color: #fff7ed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.vnav-user-role[b-8g5eat25sb] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .65rem;
    color: rgba(255, 237, 213, .5);
    margin-top: 1px;
}

.vnav-role-dot[b-8g5eat25sb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    flex-shrink: 0;
}

/* ── Nav wrapper ────────────────────────────────────── */
.vnav-nav[b-8g5eat25sb] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .25rem 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.08) transparent;
}

.vnav-nav[b-8g5eat25sb]::-webkit-scrollbar { width: 3px; }
.vnav-nav[b-8g5eat25sb]::-webkit-scrollbar-track { background: transparent; }
.vnav-nav[b-8g5eat25sb]::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* ── Sector ─────────────────────────────────────────── */
.vnav-sector[b-8g5eat25sb] {
    margin: .1rem 0;
}

.vnav-sector-header[b-8g5eat25sb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .5rem 1.1rem .5rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    transition: background .15s;
    gap: .5rem;
}

.vnav-sector-header:hover[b-8g5eat25sb] {
    background: rgba(249, 115, 22, .06);
}

.vnav-sector-left[b-8g5eat25sb] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.vnav-sector-dot[b-8g5eat25sb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Sections : teinte orange (pêche / orange clair) — distincte des onglets */
.vnav-sector-title[b-8g5eat25sb] {
    font-size: .68rem;
    font-weight: 700;
    color: #fb923c;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: color .15s;
}

.vnav-sector:hover .vnav-sector-title[b-8g5eat25sb],
.vnav-sector.open .vnav-sector-title[b-8g5eat25sb] {
    color: #fed7aa;
}

.vnav-chevron[b-8g5eat25sb] {
    font-size: .65rem;
    color: rgba(251, 146, 60, .55);
    transition: transform .22s cubic-bezier(.4,0,.2,1), color .15s;
    flex-shrink: 0;
}

.vnav-sector.open .vnav-chevron[b-8g5eat25sb] {
    transform: rotate(90deg);
    color: #fdba74;
}

/* ── Sector body (collapsible) ──────────────────────── */
.vnav-sector-body[b-8g5eat25sb] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}

.vnav-sector.open .vnav-sector-body[b-8g5eat25sb] {
    grid-template-rows: 1fr;
    background: linear-gradient(180deg, rgba(249, 115, 22, .04) 0%, transparent 100%);
    border-radius: 0 0 10px 10px;
}

.vnav-sector-body > *[b-8g5eat25sb] {
    overflow: hidden;
    min-height: 0;
}

/* ── Nav item & link ────────────────────────────────── */
.vnav-item[b-8g5eat25sb] {
    padding: 0 .6rem;
    margin-bottom: 1px;
}

/* Onglets : blanc / crème chaud (famille « blanc »), pas la même teinte que les titres de section */
[b-8g5eat25sb] .vnav-link {
    display: flex !important;
    align-items: center;
    gap: .6rem;
    padding: .52rem .8rem;
    border-radius: 9px;
    color: rgba(255, 251, 247, .88);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    transition: background .14s, color .14s, border-color .14s, box-shadow .2s ease;
    border: 1px solid transparent;
    position: relative;
    white-space: nowrap;
}

[b-8g5eat25sb] .vnav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    border-color: rgba(255, 237, 213, .22);
    box-shadow: 0 0 18px rgba(249, 115, 22, .18);
}

[b-8g5eat25sb] .vnav-link.vnav-link-active {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    border-color: rgba(253, 186, 116, .45);
    font-weight: 600;
    box-shadow:
        inset 0 0 0 1px rgba(249, 115, 22, .2),
        0 0 0 1px rgba(253, 186, 116, .12),
        0 0 26px rgba(249, 115, 22, .22);
}

[b-8g5eat25sb] .vnav-link.vnav-link-active .vnav-link-icon {
    color: #fff7ed;
}

.vnav-link-icon[b-8g5eat25sb] {
    width: 20px;
    text-align: center;
    font-size: .88rem;
    color: rgba(255, 250, 245, .72);
    flex-shrink: 0;
    transition: color .14s;
}

[b-8g5eat25sb] .vnav-link:hover .vnav-link-icon {
    color: #ffffff;
}

.vnav-link-label[b-8g5eat25sb] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Badges ─────────────────────────────────────────── */
.vnav-link-badge[b-8g5eat25sb] {
    font-size: .6rem;
    font-weight: 700;
    padding: .08rem .35rem;
    border-radius: 6px;
    line-height: 1.4;
    margin-left: auto;
    flex-shrink: 0;
}

.vnav-badge-default[b-8g5eat25sb] {
    background: rgba(255, 255, 255, .14);
    color: #ffedd5;
}

.vnav-badge-red[b-8g5eat25sb] {
    background: rgba(239,68,68,.18);
    color: #f87171;
}

/* ── Bottom quick actions ───────────────────────────── */
.vnav-bottom[b-8g5eat25sb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .7rem .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: auto;
}

.vnav-bottom-link[b-8g5eat25sb] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: rgba(255, 251, 247, .55);
    text-decoration: none;
    font-size: .95rem;
    transition: background .14s, color .14s, border-color .14s;
}

.vnav-bottom-link:hover[b-8g5eat25sb] {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

[b-8g5eat25sb] .vnav-bottom-active {
    background: rgba(255, 255, 255, .14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(253, 186, 116, .35);
    box-shadow: 0 0 18px rgba(249, 115, 22, .2);
}

.vnav-bottom-badge[b-8g5eat25sb] {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid rgba(20, 10, 6, .85);
}

/* ── Mode clair : sidebar blanche, liste orange + texte brun ── */
html[data-theme="light"] .vnav-brand[b-8g5eat25sb] {
    border-bottom-color: #fed7aa;
}

html[data-theme="light"] .vnav-brand[b-8g5eat25sb]  .volchic-logo-sub {
    color: #b45309;
}

html[data-theme="light"] .vnav-user-card[b-8g5eat25sb] {
    background: #fff7ed;
    border-color: #fed7aa;
}

html[data-theme="light"] .vnav-user-name[b-8g5eat25sb] {
    color: #431407;
}

html[data-theme="light"] .vnav-user-role[b-8g5eat25sb] {
    color: #7c2d12;
}

html[data-theme="light"] .vnav-logout[b-8g5eat25sb] {
    border-color: rgba(185, 28, 28, .35);
    background: rgba(254, 226, 226, .85);
    color: #991b1b;
}

html[data-theme="light"] .vnav-logout:hover[b-8g5eat25sb] {
    background: #fecaca;
    border-color: #b91c1c;
    color: #7f1d1d;
}

html[data-theme="light"] .vnav-sector-header:hover[b-8g5eat25sb] {
    background: rgba(249, 115, 22, .06);
}

/* Sections : orange (titres de groupe) */
html[data-theme="light"] .vnav-sector-title[b-8g5eat25sb] {
    color: #c2410c;
}

html[data-theme="light"] .vnav-sector:hover .vnav-sector-title[b-8g5eat25sb],
html[data-theme="light"] .vnav-sector.open .vnav-sector-title[b-8g5eat25sb] {
    color: #9a3412;
}

html[data-theme="light"] .vnav-chevron[b-8g5eat25sb] {
    color: rgba(234, 88, 12, .45);
}

html[data-theme="light"] .vnav-sector.open .vnav-chevron[b-8g5eat25sb] {
    color: #ea580c;
}

html[data-theme="light"] .vnav-sector.open .vnav-sector-body[b-8g5eat25sb] {
    background: linear-gradient(180deg, rgba(255, 247, 237, .9) 0%, rgba(255, 253, 251, 0) 100%);
    border-radius: 0 0 10px 10px;
}

html[data-theme="light"] .vnav-nav[b-8g5eat25sb]::-webkit-scrollbar-thumb {
    background: rgba(234, 88, 12, .2);
}

html[data-theme="light"] .vnav-nav[b-8g5eat25sb] {
    scrollbar-color: rgba(234, 88, 12, .25) transparent;
}

html[data-theme="light"] .vnav-bottom[b-8g5eat25sb] {
    border-top-color: #fed7aa;
}

html[data-theme="light"] .vnav-bottom-link[b-8g5eat25sb] {
    color: #7c2d12;
}

html[data-theme="light"] .vnav-bottom-link:hover[b-8g5eat25sb] {
    background: rgba(249, 115, 22, .08);
    color: #ea580c;
}

html[data-theme="light"] .vnav-badge-default[b-8g5eat25sb] {
    background: rgba(234, 88, 12, .12);
    color: #c2410c;
}

html[data-theme="light"] .vnav-bottom-badge[b-8g5eat25sb] {
    border-color: #ffffff;
}

/* Onglets mode clair : styles dans wwwroot/css/app.css (global) —
   Blazor compile html…::deep en html[b-xxxx] ce qui ne matche jamais <html> */
/* /Pages/BaseDonneesClient.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   BASE CLIENTS — Dark Premium CRM Theme
   Uses global --ds-* design-system tokens where available
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────── */
.bc-container[b-dwabtydvc7] {
    padding: 2rem 1.5rem 3rem;
    min-height: 100vh;
    background: var(--ds-bg-base, var(--ds-bg-app));
    color: var(--ds-text-primary, var(--ds-text));
}

/* ── Header ──────────────────────────────────────────────────────── */
.bc-header[b-dwabtydvc7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.bc-title[b-dwabtydvc7] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ds-text-primary, var(--ds-text));
    margin: 0 0 .25rem;
    display: flex;
    align-items: center;
    letter-spacing: -.02em;
}
.bc-title i[b-dwabtydvc7] { color: var(--ds-accent, #4d9cff); }

.bc-subtitle[b-dwabtydvc7] {
    font-size: .875rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
    margin: 0;
}

.bc-header-actions[b-dwabtydvc7] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.bc-btn-add[b-dwabtydvc7] {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.25rem;
    background: var(--ds-accent, #4d9cff);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.bc-btn-add:hover[b-dwabtydvc7] { background: #3a8de8; transform: translateY(-1px); }

.bc-btn-export[b-dwabtydvc7] {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.1rem;
    background: transparent;
    color: var(--ds-text-secondary, var(--ds-text-muted));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 8px;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.bc-btn-export:hover:not(:disabled)[b-dwabtydvc7] {
    background: rgba(33,115,70,.15);
    color: #3fb950;
    border-color: rgba(63,185,80,.4);
}
.bc-btn-export:disabled[b-dwabtydvc7] { opacity: .4; cursor: not-allowed; }

/* ── KPI Strip ───────────────────────────────────────────────────── */
.bc-kpi-row[b-dwabtydvc7] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.bc-kpi[b-dwabtydvc7] {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex: 1 1 160px;
    padding: 1rem 1.25rem;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 12px;
    min-width: 140px;
    box-shadow: var(--ds-shadow-sm, 0 1px 3px rgba(0,0,0,.3));
    transition: transform .15s;
}
.bc-kpi:hover[b-dwabtydvc7] { transform: translateY(-2px); }
.bc-kpi-wide[b-dwabtydvc7] { flex: 2 1 220px; }

.bc-kpi-icon[b-dwabtydvc7] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.bc-kpi-icon.blue[b-dwabtydvc7]   { background: rgba(77,156,255,.15); color: #4d9cff; }
.bc-kpi-icon.green[b-dwabtydvc7]  { background: rgba(0,196,154,.15);  color: #00c49a; }
.bc-kpi-icon.yellow[b-dwabtydvc7] { background: rgba(240,180,41,.15); color: #f0b429; }
.bc-kpi-icon.red[b-dwabtydvc7]    { background: rgba(248,113,113,.15);color: #f87171; }
.bc-kpi-icon.teal[b-dwabtydvc7]   { background: rgba(0,196,154,.15);  color: #00c49a; }

.bc-kpi-val[b-dwabtydvc7] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.bc-kpi-unit[b-dwabtydvc7] { font-size: .75rem; font-weight: 500; opacity: .7; }

.bc-kpi-lbl[b-dwabtydvc7] {
    font-size: .75rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
    margin-top: .2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Filters ─────────────────────────────────────────────────────── */
.bc-filters[b-dwabtydvc7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.bc-search-wrap[b-dwabtydvc7] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 260px;
    padding: .55rem .85rem;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 8px;
    color: var(--ds-text-muted, var(--ds-text-muted));
    transition: border-color .15s;
}
.bc-search-wrap:focus-within[b-dwabtydvc7] {
    border-color: var(--ds-accent, #4d9cff);
    box-shadow: 0 0 0 3px rgba(77,156,255,.15);
}

.bc-search[b-dwabtydvc7] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: .875rem;
    color: var(--ds-text-primary, var(--ds-text));
}
.bc-search[b-dwabtydvc7]::placeholder { color: var(--ds-text-muted, var(--ds-text-muted)); }

.bc-status-tabs[b-dwabtydvc7] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.bc-tab[b-dwabtydvc7] {
    padding: .45rem 1rem;
    background: transparent;
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ds-text-muted, var(--ds-text-muted));
    cursor: pointer;
    transition: all .15s;
}
.bc-tab:hover[b-dwabtydvc7] { border-color: var(--ds-text-muted, var(--ds-text-muted)); color: var(--ds-text-primary, var(--ds-text)); }
.bc-tab.active[b-dwabtydvc7]         { background: rgba(77,156,255,.15);   border-color: rgba(77,156,255,.5);   color: #4d9cff; }
.bc-tab.active.green[b-dwabtydvc7]   { background: rgba(0,196,154,.15);    border-color: rgba(0,196,154,.5);    color: #00c49a; }
.bc-tab.active.yellow[b-dwabtydvc7]  { background: rgba(240,180,41,.15);   border-color: rgba(240,180,41,.5);   color: #f0b429; }
.bc-tab.active.red[b-dwabtydvc7]     { background: rgba(248,113,113,.15);  border-color: rgba(248,113,113,.5);  color: #f87171; }

/* ── Cards Grid ──────────────────────────────────────────────────── */
.bc-cards-grid[b-dwabtydvc7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* ── Client Card ─────────────────────────────────────────────────── */
.bc-card[b-dwabtydvc7] {
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    border-left-width: 3px;
    box-shadow: var(--ds-shadow-sm, 0 1px 3px rgba(0,0,0,.3));
    transition: box-shadow .2s, transform .15s;
}
.bc-card:hover[b-dwabtydvc7] {
    box-shadow: 0 6px 24px rgba(0,0,0,.4);
    transform: translateY(-2px);
}

.bc-card-green[b-dwabtydvc7]   { border-left-color: #00c49a; }
.bc-card-yellow[b-dwabtydvc7]  { border-left-color: #f0b429; }
.bc-card-red[b-dwabtydvc7]     { border-left-color: #f87171; }
.bc-card-muted[b-dwabtydvc7]   { border-left-color: var(--ds-border, var(--ds-border)); }

/* Card Top */
.bc-card-top[b-dwabtydvc7] {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.bc-avatar[b-dwabtydvc7] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    flex-shrink: 0;
    color: #fff;
}
.bc-avatar-green[b-dwabtydvc7]   { background: linear-gradient(135deg, #00c49a, #00a882); }
.bc-avatar-yellow[b-dwabtydvc7]  { background: linear-gradient(135deg, #f0b429, #d49520); }
.bc-avatar-red[b-dwabtydvc7]     { background: linear-gradient(135deg, #f87171, #e05252); }
.bc-avatar-muted[b-dwabtydvc7]   { background: linear-gradient(135deg, var(--ds-border), var(--ds-border)); }

.bc-card-info[b-dwabtydvc7] { flex: 1; min-width: 0; }

.bc-card-name[b-dwabtydvc7] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-text-primary, var(--ds-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-card-phone[b-dwabtydvc7] {
    font-size: .8rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
    margin-top: .2rem;
    font-family: ui-monospace, monospace;
}

/* Status badge */
.bc-badge[b-dwabtydvc7] {
    padding: .25rem .65rem;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.bc-badge-green[b-dwabtydvc7]  { background: rgba(0,196,154,.15);   color: #00c49a; border: 1px solid rgba(0,196,154,.3); }
.bc-badge-yellow[b-dwabtydvc7] { background: rgba(240,180,41,.15);  color: #f0b429; border: 1px solid rgba(240,180,41,.3); }
.bc-badge-red[b-dwabtydvc7]    { background: rgba(248,113,113,.15); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
.bc-badge-muted[b-dwabtydvc7]  { background: rgba(110,118,129,.1);  color: var(--ds-text-muted); border: 1px solid rgba(110,118,129,.2); }

/* Stats strip */
.bc-card-stats[b-dwabtydvc7] {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--ds-bg-elevated, #1c2128);
    border-radius: 10px;
    padding: .6rem .5rem;
}

.bc-stat[b-dwabtydvc7] {
    flex: 1;
    text-align: center;
}

.bc-stat-val[b-dwabtydvc7] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--ds-text-primary, var(--ds-text));
}
.bc-stat-val.green[b-dwabtydvc7] { color: #00c49a; }
.bc-stat-val.red[b-dwabtydvc7]   { color: #f87171; }
.bc-stat-val.teal[b-dwabtydvc7]  { color: #4d9cff; }

.bc-stat-lbl[b-dwabtydvc7] {
    font-size: .68rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
    margin-top: .2rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bc-stat-sep[b-dwabtydvc7] {
    width: 1px;
    height: 28px;
    background: var(--ds-border, var(--ds-border));
    flex-shrink: 0;
}

/* Ventes par agent (caisse) */
.bc-card-agents[b-dwabtydvc7] {
    margin-top: .55rem;
    padding: .45rem .55rem;
    background: rgba(77, 156, 255, .06);
    border: 1px solid rgba(77, 156, 255, .18);
    border-radius: 8px;
}
.bc-card-agents-title[b-dwabtydvc7] {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ds-text-muted, var(--ds-text-muted));
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
}
.bc-agent-chips[b-dwabtydvc7] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .4rem;
}
.bc-agent-chip[b-dwabtydvc7] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    color: var(--ds-text-primary, var(--ds-text));
}
.bc-agent-chip-name[b-dwabtydvc7] {
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bc-agent-chip-cnt[b-dwabtydvc7] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ds-accent, #4d9cff);
}

/* Meta & Notes */
.bc-card-meta[b-dwabtydvc7] {
    font-size: .78rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
    display: flex;
    align-items: center;
}

.bc-card-notes[b-dwabtydvc7] {
    font-size: .8rem;
    color: var(--ds-text-secondary, var(--ds-text-muted));
    background: var(--ds-bg-elevated, #1c2128);
    border-radius: 6px;
    padding: .5rem .7rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    border-left: 2px solid rgba(77,156,255,.3);
}

/* Card Actions */
.bc-card-actions[b-dwabtydvc7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .6rem;
    border-top: 1px solid var(--ds-border, var(--ds-border));
    gap: .5rem;
}

.bc-status-btns[b-dwabtydvc7] {
    display: flex;
    gap: .3rem;
}

.bc-status-btn[b-dwabtydvc7] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--ds-border, var(--ds-border));
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    cursor: pointer;
    color: var(--ds-text-muted, var(--ds-text-muted));
    transition: all .15s;
}
.bc-status-btn:hover[b-dwabtydvc7]          { border-color: currentColor; opacity: .85; }
.bc-status-btn.green[b-dwabtydvc7]          { color: #00c49a; }
.bc-status-btn.green.on[b-dwabtydvc7]       { background: rgba(0,196,154,.2); border-color: #00c49a; }
.bc-status-btn.yellow[b-dwabtydvc7]         { color: #f0b429; }
.bc-status-btn.yellow.on[b-dwabtydvc7]      { background: rgba(240,180,41,.2); border-color: #f0b429; }
.bc-status-btn.red[b-dwabtydvc7]            { color: #f87171; }
.bc-status-btn.red.on[b-dwabtydvc7]         { background: rgba(248,113,113,.2); border-color: #f87171; }

.bc-card-btns[b-dwabtydvc7] { display: flex; gap: .3rem; }

.bc-icon-btn[b-dwabtydvc7] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--ds-border, var(--ds-border));
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    cursor: pointer;
    transition: all .15s;
}
.bc-icon-btn.edit[b-dwabtydvc7]         { color: var(--ds-text-muted, var(--ds-text-muted)); }
.bc-icon-btn.edit:hover[b-dwabtydvc7]   { background: rgba(77,156,255,.12); color: #4d9cff; border-color: rgba(77,156,255,.4); }
.bc-icon-btn.del[b-dwabtydvc7]          { color: var(--ds-text-muted, var(--ds-text-muted)); }
.bc-icon-btn.del:hover[b-dwabtydvc7]    { background: rgba(248,113,113,.12); color: #f87171; border-color: rgba(248,113,113,.4); }

/* ── Empty State ─────────────────────────────────────────────────── */
.bc-empty[b-dwabtydvc7] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
}
.bc-empty i[b-dwabtydvc7] {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 1rem;
    opacity: .4;
}
.bc-empty h4[b-dwabtydvc7] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ds-text-secondary, var(--ds-text-muted));
    margin-bottom: .5rem;
}
.bc-empty p[b-dwabtydvc7] { font-size: .9rem; }

/* ── Modal ───────────────────────────────────────────────────────── */
.bc-modal-backdrop[b-dwabtydvc7] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-dwabtydvc7 .15s ease;
}

.bc-modal[b-dwabtydvc7] {
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    animation: slideUp-b-dwabtydvc7 .2s ease;
    overflow: hidden;
}

.bc-modal-header[b-dwabtydvc7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--ds-border, var(--ds-border));
    background: var(--ds-bg-elevated, #1c2128);
}

.bc-modal-title[b-dwabtydvc7] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--ds-text-primary, var(--ds-text));
}

.bc-modal-close[b-dwabtydvc7] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--ds-border, var(--ds-border));
    color: var(--ds-text-muted, var(--ds-text-muted));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.bc-modal-close:hover[b-dwabtydvc7] { background: rgba(248,113,113,.12); color: #f87171; border-color: rgba(248,113,113,.4); }

.bc-modal-body[b-dwabtydvc7] { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }

.bc-modal-error[b-dwabtydvc7] {
    padding: .65rem .9rem;
    background: rgba(248,113,113,.1);
    border: 1px solid rgba(248,113,113,.35);
    border-radius: 8px;
    color: #f87171;
    font-size: .85rem;
    display: flex;
    align-items: center;
    animation: slideDown-b-dwabtydvc7 .15s ease;
}

.bc-field[b-dwabtydvc7] { display: flex; flex-direction: column; gap: .35rem; }

.bc-label[b-dwabtydvc7] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ds-text-secondary, var(--ds-text-muted));
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bc-input[b-dwabtydvc7] {
    padding: .6rem .85rem;
    background: var(--ds-bg-elevated, #1c2128);
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 8px;
    color: var(--ds-text-primary, var(--ds-text));
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.bc-input:focus[b-dwabtydvc7] {
    border-color: var(--ds-accent, #4d9cff);
    box-shadow: 0 0 0 3px rgba(77,156,255,.15);
}
.bc-input[b-dwabtydvc7]::placeholder { color: var(--ds-text-muted, var(--ds-text-muted)); }

.bc-textarea[b-dwabtydvc7] { resize: vertical; min-height: 80px; }

/* Status picker */
.bc-status-picker[b-dwabtydvc7] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.bc-pick-btn[b-dwabtydvc7] {
    display: flex;
    align-items: center;
    padding: .45rem .9rem;
    border-radius: 8px;
    border: 1.5px solid var(--ds-border, var(--ds-border));
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ds-text-muted, var(--ds-text-muted));
    transition: all .15s;
}
.bc-pick-btn.green[b-dwabtydvc7]       { color: #00c49a; }
.bc-pick-btn.green.on[b-dwabtydvc7]    { background: rgba(0,196,154,.15);  border-color: #00c49a; }
.bc-pick-btn.yellow[b-dwabtydvc7]      { color: #f0b429; }
.bc-pick-btn.yellow.on[b-dwabtydvc7]   { background: rgba(240,180,41,.15); border-color: #f0b429; }
.bc-pick-btn.red[b-dwabtydvc7]         { color: #f87171; }
.bc-pick-btn.red.on[b-dwabtydvc7]      { background: rgba(248,113,113,.15); border-color: #f87171; }

.bc-modal-footer[b-dwabtydvc7] {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ds-border, var(--ds-border));
    background: var(--ds-bg-elevated, #1c2128);
}

.bc-btn-cancel[b-dwabtydvc7] {
    padding: .55rem 1.1rem;
    background: transparent;
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 8px;
    color: var(--ds-text-muted, var(--ds-text-muted));
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: all .15s;
}
.bc-btn-cancel:hover[b-dwabtydvc7] { background: var(--ds-bg-elevated, #1c2128); color: var(--ds-text-primary, var(--ds-text)); }

.bc-btn-save[b-dwabtydvc7] {
    padding: .55rem 1.35rem;
    background: var(--ds-accent, #4d9cff);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    cursor: pointer;
    transition: background .15s, transform .1s;
    display: flex;
    align-items: center;
}
.bc-btn-save:hover:not(:disabled)[b-dwabtydvc7] { background: #3a8de8; transform: translateY(-1px); }
.bc-btn-save:disabled[b-dwabtydvc7] { opacity: .45; cursor: not-allowed; }

/* ── Toast ───────────────────────────────────────────────────────── */
.bc-toast[b-dwabtydvc7] {
    position: fixed;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .7rem 1.4rem;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 600;
    z-index: 2000;
    display: flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    animation: slideUp-b-dwabtydvc7 .2s ease;
}
.bc-toast-success[b-dwabtydvc7] { background: #1a3d2b; border: 1px solid rgba(0,196,154,.4); color: #00c49a; }
.bc-toast-warning[b-dwabtydvc7] { background: #3d2a10; border: 1px solid rgba(240,180,41,.4); color: #f0b429; }
.bc-toast-info[b-dwabtydvc7]    { background: #0d2a4a; border: 1px solid rgba(77,156,255,.4); color: #4d9cff; }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes fadeIn-b-dwabtydvc7  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp-b-dwabtydvc7 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown-b-dwabtydvc7 { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bc-container[b-dwabtydvc7] { padding: 1.25rem 1rem 2rem; }
    .bc-header[b-dwabtydvc7]     { flex-direction: column; }
    .bc-kpi-row[b-dwabtydvc7]    { gap: .6rem; }
    .bc-kpi[b-dwabtydvc7]        { flex: 1 1 140px; padding: .75rem 1rem; }
    .bc-kpi-val[b-dwabtydvc7]    { font-size: 1.25rem; }
    .bc-filters[b-dwabtydvc7]    { flex-direction: column; align-items: stretch; }
    .bc-cards-grid[b-dwabtydvc7] { grid-template-columns: 1fr; }
    .bc-modal[b-dwabtydvc7]      { max-width: 100%; border-radius: 16px 16px 0 0; }
    .bc-modal-backdrop[b-dwabtydvc7] { align-items: flex-end; }
}
/* /Pages/Boutiques.razor.rz.scp.css */
/* ═══════════════ VOLCHIC — Boutiques Franchise ═══════════════ */
.bq-page[b-uv8d9bjycu] { padding:1.25rem; max-width:1500px; }
.bq-header[b-uv8d9bjycu] { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.bq-title[b-uv8d9bjycu]  { font-size:1.4rem; font-weight:700; color:var(--ds-text); margin:0; }
.bq-sub[b-uv8d9bjycu]    { font-size:.75rem; color:var(--ds-text-muted); margin:.2rem 0 0; }

/* KPI */
.bq-kpi-row[b-uv8d9bjycu] { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.bq-kpi[b-uv8d9bjycu] { display:flex; align-items:center; gap:.85rem; padding:.85rem 1.1rem; background:var(--ds-bg-elevated); border:1px solid var(--ds-border); border-radius:12px; min-width:130px; }
.bq-kpi i[b-uv8d9bjycu] { font-size:1.3rem; flex-shrink:0; }
.bq-kpi.orange i[b-uv8d9bjycu] { color:#f97316; } .bq-kpi.green i[b-uv8d9bjycu] { color:#34d399; }
.bq-kpi.blue i[b-uv8d9bjycu]   { color:#fb923c; } .bq-kpi.purple i[b-uv8d9bjycu]{ color:#fdba74; } .bq-kpi.red i[b-uv8d9bjycu] { color:#f87171; }
.bq-kpi-v[b-uv8d9bjycu] { font-size:1.3rem; font-weight:800; color:var(--ds-text); line-height:1; }
.bq-kpi-l[b-uv8d9bjycu] { font-size:.65rem; color:var(--ds-text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.1rem; }
.bq-kpi-sub[b-uv8d9bjycu] {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    margin-top: .35rem;
    font-size: .62rem;
    font-weight: 700;
}
.bq-kpi-sub-h[b-uv8d9bjycu] { color: #60a5fa; }
.bq-kpi-sub-f[b-uv8d9bjycu] { color: #f472b6; }
.bq-kpi-sub-h i[b-uv8d9bjycu], .bq-kpi-sub-f i[b-uv8d9bjycu] { margin-right: .18rem; font-size: .72rem; vertical-align: -1px; }

/* Tabs */
.bq-tabs[b-uv8d9bjycu] { display:flex; gap:.4rem; background:var(--ds-bg-app); border:1px solid var(--ds-border); border-radius:12px; padding:.3rem; margin-bottom:1.5rem; width:fit-content; }
.bq-tab[b-uv8d9bjycu]  { padding:.4rem 1rem; border-radius:8px; border:none; background:transparent; color:var(--ds-text-muted); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .14s; display:flex; align-items:center; }
.bq-tab:hover[b-uv8d9bjycu]  { background:rgba(255,255,255,.05); color:var(--ds-text-sub); }
.bq-tab.active[b-uv8d9bjycu] { background:rgba(249,115,22,.15); color:#f97316; }
.bq-badge[b-uv8d9bjycu] { background:#f87171; color:#fff; font-size:.6rem; padding:.1rem .35rem; border-radius:5px; margin-left:.4rem; }

/* Compte sans droit création / suppression boutiques */
.bq-manage-hint[b-uv8d9bjycu] {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.09);
    color: var(--ds-text);
    font-size: 0.82rem;
    line-height: 1.5;
}
.bq-manage-hint > .bi[b-uv8d9bjycu] {
    color: #fbbf24;
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 0.06rem;
}
.bq-manage-hint strong[b-uv8d9bjycu] {
    color: var(--ds-text);
    font-weight: 700;
}
.bq-manage-hint-code[b-uv8d9bjycu] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78em;
    padding: 0.06rem 0.35rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--ds-text-sub, #e2e8f0);
}

/* Onglet Boutiques — inventaire rapide */
.bq-boutiques-toolbar[b-uv8d9bjycu] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 12px;
}
.bq-boutiques-toolbar-inner[b-uv8d9bjycu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
}
.bq-boutiques-toolbar-label[b-uv8d9bjycu] {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bq-boutiques-toolbar-select[b-uv8d9bjycu] {
    max-width: 280px;
    min-width: 180px;
}
.bq-btn-inv-rapide[b-uv8d9bjycu] {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.14s;
}
.bq-btn-inv-rapide:hover:not(:disabled)[b-uv8d9bjycu] {
    background: rgba(52, 211, 153, 0.18);
    border-color: #34d399;
}
.bq-btn-inv-rapide:disabled[b-uv8d9bjycu] {
    opacity: 0.45;
    cursor: not-allowed;
}

.bq-btn-clear-pos-stock[b-uv8d9bjycu] {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1.5px solid rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.14s;
}
.bq-btn-clear-pos-stock:hover:not(:disabled)[b-uv8d9bjycu] {
    filter: brightness(1.08);
}
.bq-btn-clear-pos-stock:disabled[b-uv8d9bjycu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.bq-stock-clear-feedback[b-uv8d9bjycu] {
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
}
.bq-stock-clear-feedback.ok[b-uv8d9bjycu] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
}
.bq-stock-clear-feedback.error[b-uv8d9bjycu] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.bq-btn-clear-parfum-medina-casa[b-uv8d9bjycu] {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1.5px solid rgba(167, 139, 250, 0.45);
    background: rgba(167, 139, 250, 0.12);
    color: #c4b5fd;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.14s;
}
.bq-btn-clear-parfum-medina-casa:hover:not(:disabled)[b-uv8d9bjycu] {
    filter: brightness(1.08);
}
.bq-btn-clear-parfum-medina-casa:disabled[b-uv8d9bjycu] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal inventaire rapide */
.bq-modal-inv-rapide[b-uv8d9bjycu] {
    max-width: 560px;
}
.bq-ir-progress-wrap[b-uv8d9bjycu] {
    padding: 0.85rem 1.1rem 0;
}
.bq-ir-progress-track[b-uv8d9bjycu] {
    height: 4px;
    background: var(--ds-bg-surface);
    border-radius: 4px;
    overflow: hidden;
}
.bq-ir-progress-fill[b-uv8d9bjycu] {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #34d399);
    border-radius: 4px;
    transition: width 0.2s ease;
}
.bq-ir-progress-txt[b-uv8d9bjycu] {
    font-size: 0.68rem;
    color: var(--ds-text-muted);
    text-align: right;
    margin-top: 0.35rem;
}
.bq-ir-section-pill[b-uv8d9bjycu] {
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fdba74;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.28);
}
.bq-ir-body[b-uv8d9bjycu] {
    padding: 1rem 1.25rem 1.25rem;
}
.bq-ir-row[b-uv8d9bjycu] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.bq-ir-col-qty[b-uv8d9bjycu] {
    flex: 0 0 auto;
}
.bq-ir-col-info[b-uv8d9bjycu] {
    flex: 1;
    min-width: 200px;
}
.bq-ir-label[b-uv8d9bjycu] {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}
.bq-ir-input-wrap[b-uv8d9bjycu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ds-bg-elevated);
}
.bq-ir-spin[b-uv8d9bjycu] {
    width: 100%;
    padding: 0.35rem;
    border: none;
    background: var(--ds-bg-surface);
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: background 0.12s;
}
.bq-ir-spin:hover[b-uv8d9bjycu] {
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
}
.bq-ir-num[b-uv8d9bjycu] {
    width: 100%;
    min-width: 100px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
    padding: 0.5rem 0.25rem;
    border: none;
    background: transparent;
    color: var(--ds-text);
    outline: none;
}
.bq-ir-prod-name[b-uv8d9bjycu] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-text);
    margin-bottom: 0.45rem;
    line-height: 1.25;
}
.bq-ir-meta[b-uv8d9bjycu] {
    font-size: 0.76rem;
    color: var(--ds-text-muted);
    margin-top: 0.35rem;
}
.bq-ir-feedback[b-uv8d9bjycu] {
    margin: 0 1.1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.35;
    border: 1px solid transparent;
}
.bq-ir-feedback.ok[b-uv8d9bjycu] {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}
.bq-ir-feedback.warn[b-uv8d9bjycu] {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fcd34d;
}
.bq-ir-footer[b-uv8d9bjycu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    padding: 0.85rem 1.1rem 1.1rem;
    border-top: 1px solid var(--ds-border);
}

.bq-ir-footer-nav[b-uv8d9bjycu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.bq-ir-btn-prev[b-uv8d9bjycu] {
    margin: 0;
    background: transparent;
    border: 2px solid rgba(249, 115, 22, 0.55);
    color: #fb923c;
    box-shadow: none;
}

.bq-ir-btn-prev:hover:not(:disabled)[b-uv8d9bjycu] {
    filter: brightness(1.12);
    background: rgba(249, 115, 22, 0.1);
}

.bq-ir-btn-prev:disabled[b-uv8d9bjycu] {
    opacity: 0.35;
    cursor: not-allowed;
    filter: none;
}

/* Store grid */
.bq-grid[b-uv8d9bjycu] { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.bq-store-card[b-uv8d9bjycu] { background:var(--ds-bg-elevated); border:1px solid var(--ds-border); border-radius:14px; overflow:hidden; cursor:pointer; transition:all .18s; position:relative; }
.bq-store-card:hover[b-uv8d9bjycu] { border-color: var(--ds-text-muted); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.bq-store-card.inactive[b-uv8d9bjycu] { opacity:.55; }
.bq-store-accent[b-uv8d9bjycu] { height:3px; position:absolute; top:0; left:0; right:0; }
.bq-store-head[b-uv8d9bjycu] { display:flex; align-items:center; gap:.75rem; padding:1rem 1rem .6rem; }
.bq-store-avatar[b-uv8d9bjycu] { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.bq-store-name[b-uv8d9bjycu] { font-size:.92rem; font-weight:700; color:var(--ds-text); }
.bq-store-code[b-uv8d9bjycu] { font-size:.68rem; color:var(--ds-text-muted); margin-top:.1rem; }
.bq-store-status[b-uv8d9bjycu] { font-size:.62rem; font-weight:700; padding:.15rem .5rem; border-radius:6px; }
.bq-store-status.active[b-uv8d9bjycu]   { background:rgba(52,211,153,.12); color:#34d399; }
.bq-store-status.inactive[b-uv8d9bjycu] { background:rgba(107,114,128,.12); color:#6b7280; }
.bq-store-stats[b-uv8d9bjycu] { display:flex; gap:.75rem; padding:.4rem 1rem; }
.bq-store-stat[b-uv8d9bjycu] { display:flex; align-items:center; gap:.35rem; font-size:.73rem; color:var(--ds-text-muted); }
.bq-store-stat.red[b-uv8d9bjycu] { color:#f87171; }
.bq-store-flacons[b-uv8d9bjycu] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    padding: 0 1rem .55rem;
    font-size: .74rem;
    font-weight: 700;
}
.bq-store-flac-h[b-uv8d9bjycu] { color: #60a5fa; }
.bq-store-flac-f[b-uv8d9bjycu] { color: #f472b6; }
.bq-store-flac-h i[b-uv8d9bjycu], .bq-store-flac-f i[b-uv8d9bjycu] { margin-right: .25rem; opacity: .92; }
.bq-store-foot[b-uv8d9bjycu] { display:flex; gap:.5rem; padding:.75rem 1rem; border-top:1px solid var(--ds-bg-surface); flex-wrap:wrap; }

/* Stock layout */
.bq-stock-layout[b-uv8d9bjycu] { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:900px) { .bq-stock-layout[b-uv8d9bjycu] { grid-template-columns:1fr; } }

/* Parfums Stock HQ — blocs Homme / Femme / autres */
.bq-card-parfums-split .bq-table-wrap + .bq-parfum-subhead[b-uv8d9bjycu] {
    border-top: 1px solid var(--ds-border);
}
.bq-parfum-subhead[b-uv8d9bjycu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 1rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.12);
}
.bq-parfum-subhead-title[b-uv8d9bjycu] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.bq-parfum-subhead-title i[b-uv8d9bjycu] { font-size: 1rem; opacity: 0.9; }
.bq-parfum-sec-homme[b-uv8d9bjycu] {
    border-left: 3px solid #3b82f6;
    padding-left: calc(1rem - 3px);
}
.bq-parfum-sec-homme .bq-parfum-subhead-title[b-uv8d9bjycu] { color: #60a5fa; }
.bq-parfum-sec-femme[b-uv8d9bjycu] {
    border-left: 3px solid #db2777;
    padding-left: calc(1rem - 3px);
}
.bq-parfum-sec-femme .bq-parfum-subhead-title[b-uv8d9bjycu] { color: #f472b6; }
.bq-parfum-sec-autre[b-uv8d9bjycu] {
    border-left: 3px solid #64748b;
    padding-left: calc(1rem - 3px);
}
.bq-parfum-sec-autre .bq-parfum-subhead-title[b-uv8d9bjycu] { color: #94a3b8; }

.bq-inv-sec-produit[b-uv8d9bjycu] {
    border-left: 3px solid #38bdf8;
    padding-left: calc(1rem - 3px);
}
.bq-inv-sec-produit .bq-parfum-subhead-title[b-uv8d9bjycu] { color: #7dd3fc; }

/* Cards */
.bq-card[b-uv8d9bjycu] { background:var(--ds-bg-elevated); border:1px solid var(--ds-border); border-radius:14px; overflow:hidden; margin-bottom:.75rem; }
.bq-card-head[b-uv8d9bjycu] { display:flex; align-items:center; gap:.6rem; padding:.8rem 1.1rem; border-bottom:1px solid var(--ds-border); font-size:.88rem; font-weight:600; color:var(--ds-text); }
.bq-card-inv-split .bq-card-head[b-uv8d9bjycu] { align-items: flex-end; flex-wrap: wrap; }
.bq-total[b-uv8d9bjycu] { margin-left:auto; font-size:.7rem; color:var(--ds-text-muted); font-weight:400; }
.bq-total-stack[b-uv8d9bjycu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
    text-align: right;
}
.bq-fl-summary[b-uv8d9bjycu] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--ds-text-sub);
    line-height: 1.35;
    max-width: 22rem;
}

/* Inventaire — totaux unités (parfums / produits) mis en avant */
.bq-inv-total-block[b-uv8d9bjycu] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    text-align: right;
    line-height: 1;
}
.bq-inv-flacons-hf[b-uv8d9bjycu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ds-text-sub);
    letter-spacing: 0.02em;
}
.bq-inv-flacons-hf .bi-gender-male[b-uv8d9bjycu] { color: #60a5fa; }
.bq-inv-flacons-hf .bi-gender-female[b-uv8d9bjycu] { color: #f472b6; }
.bq-inv-fl-sep[b-uv8d9bjycu] { color: var(--ds-text-muted); font-weight: 500; }

.bq-inv-flacons-hf .bi-droplet-half[b-uv8d9bjycu] { color: #94a3b8; }

.bq-inv-total-prod-plus[b-uv8d9bjycu] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ds-text-sub);
}
.bq-inv-total-prod-lbl[b-uv8d9bjycu] {
    font-weight: 600;
    color: var(--ds-text-muted);
    font-size: 0.72rem;
}
.bq-inv-total-units[b-uv8d9bjycu] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bq-inv-total-num[b-uv8d9bjycu] {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fb923c;
    font-variant-numeric: tabular-nums;
}
.bq-inv-total-block--section .bq-inv-total-num[b-uv8d9bjycu] {
    font-size: 1.45rem;
}
.bq-inv-total-unit-label[b-uv8d9bjycu] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}
.bq-inv-total-meta[b-uv8d9bjycu] {
    font-size: 0.7rem;
    color: var(--ds-text-muted);
    font-weight: 500;
}
.bq-parfum-subhead--hero[b-uv8d9bjycu] {
    align-items: flex-end;
    padding-top: 0.65rem;
    padding-bottom: 0.55rem;
}
@media (max-width: 640px) {
    .bq-inv-total-num[b-uv8d9bjycu] { font-size: 1.55rem; }
    .bq-inv-total-block--section .bq-inv-total-num[b-uv8d9bjycu] { font-size: 1.2rem; }
}

/* Tables */
.bq-table-wrap[b-uv8d9bjycu] { overflow-x:auto; }
.bq-table[b-uv8d9bjycu] { width:100%; border-collapse:collapse; font-size:.8rem; }
.bq-table th[b-uv8d9bjycu] { padding:.6rem 1rem; background:var(--ds-bg-app); color:var(--ds-text-muted); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--ds-border); text-align:left; }
.bq-table td[b-uv8d9bjycu] { padding:.6rem 1rem; color:var(--ds-text-sub); border-bottom:1px solid var(--ds-bg-surface); vertical-align:middle; }
.bq-table tbody tr:hover[b-uv8d9bjycu] { background:rgba(255,255,255,.02); }

/* Stock value badges */
.bq-stock-val[b-uv8d9bjycu] { font-weight:700; padding:.12rem .45rem; border-radius:5px; font-size:.78rem; }
.bq-stock-val.ok[b-uv8d9bjycu]  { color:#34d399; background:rgba(52,211,153,.1); }
.bq-stock-val.low[b-uv8d9bjycu] { color:#fbbf24; background:rgba(251,191,36,.1); }
.bq-stock-val.out[b-uv8d9bjycu] { color:#f87171; background:rgba(248,113,113,.1); }

.bq-level-dot[b-uv8d9bjycu] { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.35rem; }
.bq-level-dot.ok[b-uv8d9bjycu]  { background:#34d399; }
.bq-level-dot.low[b-uv8d9bjycu] { background:#fbbf24; }
.bq-level-dot.out[b-uv8d9bjycu] { background:#f87171; animation:pulse-dot-b-uv8d9bjycu .8s ease-in-out infinite; }
@keyframes pulse-dot-b-uv8d9bjycu { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* Tags */
.bq-genre-tag[b-uv8d9bjycu],.bq-type-tag[b-uv8d9bjycu] { font-size:.68rem; padding:.12rem .45rem; border-radius:5px; background:rgba(251,146,60,.1); color:#fb923c; }
.bq-urgence-tag[b-uv8d9bjycu],.bq-status-tag[b-uv8d9bjycu] { font-size:.72rem; font-weight:700; }

/* Demandes */
.bq-demandes-list[b-uv8d9bjycu] { display:flex; flex-direction:column; gap:.75rem; }
.bq-demande-card[b-uv8d9bjycu] { display:flex; align-items:center; gap:.85rem; background:var(--ds-bg-elevated); border:1px solid var(--ds-border); border-radius:12px; padding:.85rem 1.1rem; flex-wrap:wrap; }
.bq-demande-urgence[b-uv8d9bjycu] { font-size:.7rem; font-weight:700; padding:.25rem .65rem; border-radius:7px; flex-shrink:0; }
.bq-demande-title[b-uv8d9bjycu] { font-size:.88rem; font-weight:600; color:var(--ds-text); }
.bq-demande-meta[b-uv8d9bjycu]  { font-size:.72rem; color:var(--ds-text-muted); margin-top:.15rem; }
.bq-demande-notes[b-uv8d9bjycu] { font-size:.72rem; color:var(--ds-text-muted); margin-top:.1rem; font-style:italic; }

/* Drawer */
.bq-drawer-overlay[b-uv8d9bjycu] { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999; display:flex; justify-content:flex-end; }
.bq-drawer[b-uv8d9bjycu] { width:420px; max-width:95vw; background:var(--ds-bg-app); border-left:1px solid var(--ds-border); display:flex; flex-direction:column; height:100%; overflow-y:auto; animation:slide-in-b-uv8d9bjycu .22s ease; }
@keyframes slide-in-b-uv8d9bjycu { from{transform:translateX(100%);} to{transform:translateX(0);} }
.bq-drawer-head[b-uv8d9bjycu] { display:flex; align-items:center; gap:.85rem; padding:1.1rem 1.25rem; border-bottom:1px solid var(--ds-border); position:sticky; top:0; background:var(--ds-bg-app); z-index:1; }
.bq-drawer-avatar[b-uv8d9bjycu] { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bq-drawer-title[b-uv8d9bjycu] { font-size:1rem; font-weight:700; color:var(--ds-text); }
.bq-drawer-code[b-uv8d9bjycu]  { font-size:.7rem; color:var(--ds-text-muted); margin-top:.15rem; }
.bq-close-btn[b-uv8d9bjycu] { margin-left:auto; width:32px; height:32px; border-radius:8px; border:1px solid var(--ds-border); background:transparent; color:var(--ds-text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bq-drawer-body[b-uv8d9bjycu] { padding:1.1rem 1.25rem; flex:1; overflow-y:auto; }
.bq-drawer-foot[b-uv8d9bjycu] { padding:.85rem 1.25rem; border-top:1px solid var(--ds-border); display:flex; justify-content:flex-end; gap:.5rem; }
.bq-drawer-section-title[b-uv8d9bjycu] { font-size:.65rem; font-weight:700; color:var(--ds-text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.65rem; }

.bq-drawer-parfum-summary[b-uv8d9bjycu] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .85rem;
    align-items: center;
    padding: .55rem .65rem;
    margin-bottom: .75rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border);
    background: rgba(251, 146, 60, .06);
    font-size: .76rem;
    color: var(--ds-text-sub);
}
.bq-drawer-parfum-summary span[b-uv8d9bjycu] {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}
.bq-drawer-parfum-summary .bi-gender-male[b-uv8d9bjycu] { color: #60a5fa; }
.bq-drawer-parfum-summary .bi-gender-female[b-uv8d9bjycu] { color: #f472b6; }
.bq-drawer-parfum-summary .bi-droplet-half[b-uv8d9bjycu] { color: #94a3b8; }
.bq-drawer-parfum-sum-tot[b-uv8d9bjycu] {
    margin-left: auto;
    font-weight: 700;
    color: var(--ds-text);
}
@media (max-width: 420px) {
    .bq-drawer-parfum-sum-tot[b-uv8d9bjycu] { margin-left: 0; width: 100%; }
}

.bq-total-block-drawer[b-uv8d9bjycu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    margin-left: auto;
}
.bq-total-num-drawer[b-uv8d9bjycu] {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fb923c;
    font-variant-numeric: tabular-nums;
}
.bq-total-meta-drawer[b-uv8d9bjycu] {
    font-size: 0.62rem;
    color: var(--ds-text-muted);
}

.bq-drawer-stock-wrap[b-uv8d9bjycu] { display: flex; flex-direction: column; gap: 0; margin-bottom: .25rem; }
.bq-drawer-body .bq-parfum-subhead.bq-drawer-stock-sub[b-uv8d9bjycu] {
    font-size: .72rem;
    padding: .45rem .65rem .4rem;
    margin-top: .35rem;
}
.bq-drawer-body .bq-parfum-subhead.bq-drawer-stock-sub:first-of-type[b-uv8d9bjycu] { margin-top: 0; }

.bq-detail-item[b-uv8d9bjycu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--ds-bg-surface);
}
.bq-detail-item-left[b-uv8d9bjycu] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1;
    min-width: 0;
}
.bq-detail-item-right[b-uv8d9bjycu] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}
.bq-detail-idx[b-uv8d9bjycu] {
    flex-shrink: 0;
    min-width: 1.4rem;
    text-align: right;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    font-variant-numeric: tabular-nums;
}
.bq-detail-name[b-uv8d9bjycu] { font-size: .8rem; color: var(--ds-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-detail-type[b-uv8d9bjycu] { font-size: .65rem; color: var(--ds-text-muted); white-space: nowrap; max-width: 5rem; overflow: hidden; text-overflow: ellipsis; }

/* Form */
.bq-form-field[b-uv8d9bjycu] { margin-bottom:.9rem; }
.bq-form-field label[b-uv8d9bjycu] { display:block; font-size:.62rem; font-weight:700; color:var(--ds-text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.35rem; }
.bq-input[b-uv8d9bjycu],.bq-select[b-uv8d9bjycu] { width:100%; background:var(--ds-bg-elevated); border:1px solid var(--ds-border); border-radius:9px; padding:.55rem .85rem; font-size:.84rem; color:var(--ds-text); outline:none; transition:border-color .13s; }
.bq-input:focus[b-uv8d9bjycu],.bq-select:focus[b-uv8d9bjycu] { border-color:#f97316; }
.bq-select option[b-uv8d9bjycu] { background:var(--ds-bg-app); }
.bq-form-error[b-uv8d9bjycu] { font-size:.76rem; color:#f87171; margin-top:.4rem; }
.bq-toggle[b-uv8d9bjycu] { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.82rem; color:var(--ds-text-sub); }
.bq-color-dot[b-uv8d9bjycu] { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:all .13s; }
.bq-color-dot.selected[b-uv8d9bjycu] { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.3); transform:scale(1.15); }

/* Buttons */
.bq-btn-new[b-uv8d9bjycu] { padding:.55rem 1.1rem; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; border:none; border-radius:10px; font-size:.85rem; font-weight:700; cursor:pointer; display:flex; align-items:center; box-shadow:0 4px 12px rgba(249,115,22,.3); transition:all .14s; }
.bq-btn-new:hover[b-uv8d9bjycu] { filter:brightness(1.1); transform:translateY(-1px); }
.bq-btn-full[b-uv8d9bjycu] { width:100%; padding:.7rem; border:none; border-radius:10px; font-size:.88rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .14s; }
.bq-btn-full.orange[b-uv8d9bjycu] { background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; box-shadow:0 4px 12px rgba(249,115,22,.3); }
.bq-btn-full:hover[b-uv8d9bjycu] { filter:brightness(1.1); }
.bq-action-btn[b-uv8d9bjycu] { padding:.35rem .75rem; border-radius:8px; border:none; font-size:.76rem; font-weight:600; cursor:pointer; display:flex; align-items:center; transition:all .13s; }
.bq-action-btn.orange[b-uv8d9bjycu] { background:rgba(251,146,60,.12); color:#fb923c; }
.bq-action-btn.blue[b-uv8d9bjycu] { background:rgba(251,146,60,.12); color:#fb923c; }
.bq-action-btn.secondary[b-uv8d9bjycu] { background:rgba(255,255,255,.05); color:var(--ds-text-muted); border:1px solid var(--ds-border); }
.bq-action-btn.danger[b-uv8d9bjycu] { background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.25); }
.bq-action-btn:hover[b-uv8d9bjycu] { filter:brightness(1.2); }
.bq-btn-sm[b-uv8d9bjycu] { padding:.38rem .8rem; border-radius:8px; border:none; font-size:.78rem; font-weight:600; cursor:pointer; display:flex; align-items:center; transition:all .13s; }
.bq-btn-sm.green[b-uv8d9bjycu] { background:linear-gradient(135deg,#34d399,#059669); color:#fff; }
.bq-btn-sm.red[b-uv8d9bjycu]   { background:rgba(248,113,113,.15); color:#f87171; }
.bq-btn-sm.secondary[b-uv8d9bjycu] { background:transparent; border:1px solid var(--ds-border); color:var(--ds-text-muted); }
.bq-btn-sm:hover[b-uv8d9bjycu] { filter:brightness(1.15); }

/* Empty */
.bq-empty-state[b-uv8d9bjycu] { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:2.5rem; color:var(--ds-text-muted); font-size:.82rem; }
.text-orange[b-uv8d9bjycu] { color:#f97316; } .text-green[b-uv8d9bjycu] { color:#34d399; } .text-blue[b-uv8d9bjycu] { color:#fb923c; }

/* ═══════════════ INVENTAIRE TAB ═══════════════ */

/* Toolbar: store selector + add button */
.bq-inv-toolbar[b-uv8d9bjycu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.bq-inv-actions[b-uv8d9bjycu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.bq-inv-filters[b-uv8d9bjycu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 12px;
}

.bq-inv-filters-title[b-uv8d9bjycu] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ds-text-muted);
    width: 100%;
}
@media (min-width: 720px) {
    .bq-inv-filters-title[b-uv8d9bjycu] {
        width: auto;
        align-self: center;
        margin-right: .25rem;
    }
}

.bq-inv-filters-fields[b-uv8d9bjycu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .65rem .85rem;
    flex: 1;
    min-width: 0;
}

.bq-inv-filter-field[b-uv8d9bjycu] {
    display: flex;
    flex-direction: column;
    gap: .28rem;
    margin: 0;
}

.bq-inv-filter-lbl[b-uv8d9bjycu] {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ds-text-muted);
}

.bq-inv-filter-date[b-uv8d9bjycu] {
    width: auto;
    min-width: 10.5rem;
    padding: .45rem .65rem;
    font-size: .82rem;
}

.bq-inv-filter-agent-wrap[b-uv8d9bjycu] {
    flex: 1;
    min-width: 140px;
    max-width: 280px;
}

.bq-inv-filter-agent[b-uv8d9bjycu] {
    padding: .45rem .65rem;
    font-size: .82rem;
}

.bq-inv-filter-reset[b-uv8d9bjycu] {
    align-self: flex-end;
}

.bq-inv-filter-meta[b-uv8d9bjycu] {
    font-weight: 600;
    color: var(--ds-text-muted);
    font-size: .85em;
}

.bq-inv-store-group[b-uv8d9bjycu] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.bq-inv-store-btn[b-uv8d9bjycu] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .85rem;
    border-radius: 8px;
    border: 1.5px solid var(--ds-border);
    background: var(--ds-bg-elevated);
    color: var(--ds-text-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .14s;
}
.bq-inv-store-btn:hover[b-uv8d9bjycu] { border-color: var(--ds-text-muted); color: var(--ds-text-sub); }
.bq-inv-store-btn.active[b-uv8d9bjycu] { background: rgba(249,115,22,.08); }
.bq-inv-store-btn i.bi-diagram-3[b-uv8d9bjycu] { opacity: .9; }

.bq-inv-store-dot[b-uv8d9bjycu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Column alignment */
.bq-col-idx[b-uv8d9bjycu] {
    width: 2.75rem;
    max-width: 3.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ds-text-muted);
    font-weight: 600;
}
.bq-table th.bq-col-idx[b-uv8d9bjycu] { text-align: right; }

.bq-col-num[b-uv8d9bjycu] { text-align: right; }
.bq-col-in[b-uv8d9bjycu]  { color: #34d399 !important; }
.bq-col-out[b-uv8d9bjycu] { color: #f87171 !important; }

/* IN/OUT values in cells */
.bq-mvt-in[b-uv8d9bjycu]  { color: #34d399; font-weight: 700; font-size: .84rem; }
.bq-mvt-out[b-uv8d9bjycu] { color: #f87171; font-weight: 700; font-size: .84rem; }
.bq-muted[b-uv8d9bjycu]   { color: var(--ds-text-muted); font-size: .78rem; }

/* Movement type badges */
.bq-mvt-badge[b-uv8d9bjycu] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 6px;
    letter-spacing: .02em;
}
.bq-mvt-badge.in[b-uv8d9bjycu]  { background: rgba(52,211,153,.12);  color: #34d399; }
.bq-mvt-badge.out[b-uv8d9bjycu] { background: rgba(248,113,113,.12); color: #f87171; }

/* Quick add button (+) in stock table */
.bq-inv-quick-add[b-uv8d9bjycu] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    cursor: pointer;
    transition: all .13s;
}
.bq-inv-quick-add:hover[b-uv8d9bjycu] {
    background: rgba(52,211,153,.12);
    border-color: #34d399;
}

/* Modal (centered, narrower than drawer) */
.bq-modal[b-uv8d9bjycu] {
    background: var(--ds-bg-app);
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    animation: slide-in-b-uv8d9bjycu .2s ease;
    align-self: center;
    margin: auto;
}

/* override overlay to center the modal */
.bq-drawer-overlay:has(.bq-modal)[b-uv8d9bjycu] {
    align-items: center;
    justify-content: center;
}
/* /Pages/Caisse.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   VOLCHIC CAISSE — Modern POS Design
   Intégré au layout ERP (MainLayout) · Orange accent (#FF6A00)
═══════════════════════════════════════════════════════════════ */

/* ── Page intégrée (hors EmptyLayout) ─────────────────────────── */
.caisse-page[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.caisse-page-header[b-a4jfm646ag] {
    margin-bottom: 0 !important;
    align-items: center;
}
.caisse-page-actions[b-a4jfm646ag] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    justify-content: flex-end;
}
.caisse-main[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--ds-radius-lg, 12px);
    border: 1px solid var(--ds-border);
    overflow: hidden;
    background: var(--ds-bg-surface);
    box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}
.caisse-workspace.pos-workspace[b-a4jfm646ag] {
    background: var(--ds-bg-app);
    border-radius: 0;
}
.caisse-session-pill[b-a4jfm646ag] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    vertical-align: middle;
    color: var(--ds-text-muted);
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
}
.caisse-session-pill--live[b-a4jfm646ag] {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.35);
}
.caisse-session-pill--live i[b-a4jfm646ag] {
    font-size: 0.45rem;
    animation: pulse-dot-b-a4jfm646ag 0.9s infinite;
}
.caisse-store-pill.pos-store-pill[b-a4jfm646ag] {
    background: var(--ds-bg-elevated);
    border-color: var(--ds-border);
    position: relative;
    z-index: 20;
}
/* Sélecteur boutique : icône + couleur propres à chaque magasin */
.caisse-store-picker-wrap[b-a4jfm646ag] {
    position: relative;
}
.caisse-store-picker-backdrop[b-a4jfm646ag] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: default;
}
.caisse-store-picker[b-a4jfm646ag] {
    position: relative;
    z-index: 1050;
}
.caisse-store-picker-trigger[b-a4jfm646ag] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.35rem 0.25rem 0.25rem;
    border: none;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: 8px;
    max-width: min(240px, 52vw);
}
.caisse-store-picker-trigger:hover[b-a4jfm646ag] {
    background: color-mix(in srgb, var(--ds-text) 6%, transparent);
}
.caisse-store-picker-mark[b-a4jfm646ag] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--store-dot, #00a884) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--store-dot, #00a884) 42%, transparent);
}
.caisse-store-picker-mark i[b-a4jfm646ag] {
    font-size: 0.95rem;
    color: var(--store-dot, #00a884);
}
.caisse-store-picker-label[b-a4jfm646ag] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.caisse-store-picker-chev[b-a4jfm646ag] {
    font-size: 0.65rem;
    opacity: 0.65;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.caisse-store-picker-chev.is-open[b-a4jfm646ag] {
    transform: rotate(180deg);
}
.caisse-store-picker-menu[b-a4jfm646ag] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: min(280px, calc(100vw - 2rem));
    max-height: min(320px, 50vh);
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: 12px;
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}
.caisse-store-picker-item[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.caisse-store-picker-item:hover[b-a4jfm646ag] {
    background: color-mix(in srgb, var(--ds-text) 6%, transparent);
}
.caisse-store-picker-item.is-active[b-a4jfm646ag] {
    background: color-mix(in srgb, var(--ds-accent, #ff6a00) 12%, transparent);
}
.caisse-store-picker-item-text[b-a4jfm646ag] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.caisse-store-picker-item-name[b-a4jfm646ag] {
    font-weight: 600;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.caisse-store-picker-code[b-a4jfm646ag] {
    font-size: 0.68rem;
    color: var(--ds-text-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.caisse-store-picker-check[b-a4jfm646ag] {
    flex-shrink: 0;
    color: var(--ds-accent, #ff6a00);
    font-size: 0.9rem;
}
/* Titre page : badge boutique courante */
.caisse-title-store-badge[b-a4jfm646ag] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.35rem;
    vertical-align: middle;
    border-radius: 10px;
    background: color-mix(in srgb, var(--caisse-store-icon, var(--ds-accent)) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--caisse-store-icon, var(--ds-accent)) 38%, transparent);
}
.caisse-title-store-badge i[b-a4jfm646ag] {
    font-size: 1.05rem;
    color: var(--caisse-store-icon, var(--ds-accent));
}
.caisse-store-pill .pos-store-sel[b-a4jfm646ag] {
    color: var(--ds-text);
}
.caisse-store-pill .pos-store-sel option[b-a4jfm646ag] {
    background: var(--ds-bg-surface);
    color: var(--ds-text);
}
.caisse-store-pill .pos-store-ext[b-a4jfm646ag] {
    color: var(--ds-text-muted);
}
.caisse-store-pill .pos-store-ext:hover[b-a4jfm646ag] {
    color: var(--ds-accent);
}
.caisse-sync-btn--spin i[b-a4jfm646ag] {
    animation: spin-b-a4jfm646ag 0.65s linear infinite;
    display: inline-block;
}
@media (max-width: 520px) {
    .caisse-sync-label[b-a4jfm646ag] {
        display: none;
    }
}

/* ── Catalogue caisse (thème DS, remplace les inline gris/blanc) ── */
.caisse-catalog[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--ds-border);
    background: var(--ds-bg-app);
}
.caisse-catalog-toolbar[b-a4jfm646ag] {
    flex-shrink: 0;
    background: var(--ds-bg-surface);
    border-bottom: 1px solid var(--ds-border);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.caisse-catalog-row[b-a4jfm646ag] {
    display: flex;
    gap: 8px;
    align-items: center;
}
.caisse-search-wrap[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ds-bg-elevated);
    border: 1.5px solid var(--ds-border);
    border-radius: 999px;
    padding: 0 14px;
    transition: border-color 0.15s ease;
}
.caisse-search-wrap:focus-within[b-a4jfm646ag] {
    border-color: var(--ds-accent);
}
.caisse-search-ico[b-a4jfm646ag] {
    color: var(--ds-text-muted);
    font-size: 14px;
    flex-shrink: 0;
}
.caisse-search-input[b-a4jfm646ag] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ds-text);
    font-size: 14px;
    padding: 10px 0;
}
.caisse-search-input[b-a4jfm646ag]::placeholder {
    color: var(--ds-text-muted);
}
.caisse-search-clear[b-a4jfm646ag] {
    background: none;
    border: none;
    color: var(--ds-text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    line-height: 1;
}
.caisse-search-clear:hover[b-a4jfm646ag] {
    color: var(--ds-text);
}
.caisse-btn-scan[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--ds-border);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    background: var(--ds-bg-elevated);
    color: var(--ds-text-muted);
}
.caisse-btn-scan:hover[b-a4jfm646ag] {
    border-color: var(--ds-accent);
    color: var(--ds-text);
}
.caisse-btn-scan--active[b-a4jfm646ag] {
    background: var(--ds-accent);
    color: var(--ds-text-inverse);
    border-color: var(--ds-accent);
    box-shadow: 0 3px 10px var(--ds-accent-ring);
}
.caisse-btn-scan-camera[b-a4jfm646ag] {
    border-color: color-mix(in srgb, var(--ds-accent) 55%, var(--ds-border));
    color: var(--ds-accent);
}
.caisse-btn-scan-camera:hover[b-a4jfm646ag] {
    color: var(--ds-text-inverse);
    background: linear-gradient(135deg, #ea580c, #f97316);
    border-color: transparent;
}
.caisse-scan-legend[b-a4jfm646ag] {
    margin: 0;
    padding: 0 4px 2px;
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--ds-text-muted);
}
.caisse-scan-legend strong[b-a4jfm646ag] {
    color: var(--ds-text-sub);
}

/* ── Modal scan caméra ───────────────────────────────────────── */
.caisse-camera-overlay[b-a4jfm646ag] {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}
.caisse-camera-dialog[b-a4jfm646ag] {
    width: min(520px, 100%);
    max-height: min(92vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.caisse-camera-head[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ds-text);
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-bg-elevated);
}
.caisse-camera-close[b-a4jfm646ag] {
    border: none;
    background: transparent;
    color: var(--ds-text-muted);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1;
}
.caisse-camera-close:hover[b-a4jfm646ag] {
    color: var(--ds-text);
    background: var(--ds-bg-app);
}
.caisse-camera-hint[b-a4jfm646ag] {
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--ds-text-muted);
    border-bottom: 1px solid var(--ds-border);
}
.caisse-camera-reader[b-a4jfm646ag] {
    min-height: 260px;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.caisse-camera-reader video[b-a4jfm646ag] {
    width: 100% !important;
    max-height: 340px;
    object-fit: cover;
}
.caisse-camera-foot[b-a4jfm646ag] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ds-border);
    display: flex;
    justify-content: flex-end;
    background: var(--ds-bg-elevated);
}

.caisse-chip-row[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.caisse-chip[b-a4jfm646ag] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1.5px solid var(--ds-border);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    color: var(--ds-text-muted);
}
.caisse-chip:hover[b-a4jfm646ag] {
    border-color: var(--ds-accent);
    color: var(--ds-text);
}
.caisse-chip--active[b-a4jfm646ag] {
    background: var(--ds-accent);
    color: var(--ds-text-inverse);
    border-color: var(--ds-accent);
}
.caisse-scan-zone[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ds-accent-dim);
    border: 2px dashed color-mix(in srgb, var(--ds-accent) 45%, transparent);
    border-radius: 12px;
    padding: 8px 14px;
}
.caisse-scan-zone .caisse-scan-ico[b-a4jfm646ag] {
    color: var(--ds-accent);
    font-size: 20px;
    flex-shrink: 0;
}
.caisse-scan-input[b-a4jfm646ag] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ds-text);
    font-size: 15px;
    font-weight: 600;
    padding: 6px 0;
}
.caisse-scan-hint[b-a4jfm646ag] {
    font-size: 11px;
    color: var(--ds-text-muted);
    white-space: nowrap;
    font-style: italic;
}
.caisse-filter-row[b-a4jfm646ag] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.caisse-filter-count[b-a4jfm646ag] {
    margin-left: auto;
    font-size: 11px;
    color: var(--ds-text-muted);
}
.caisse-filter-chip[b-a4jfm646ag] {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--ds-border);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    color: var(--ds-text-muted);
}
.caisse-filter-chip:hover[b-a4jfm646ag] {
    border-color: var(--ds-accent);
    color: var(--ds-text);
}
.caisse-filter-chip--active[b-a4jfm646ag] {
    background: var(--ds-accent);
    color: var(--ds-text-inverse);
    border-color: var(--ds-accent);
    box-shadow: 0 2px 10px var(--ds-accent-ring);
}
.caisse-filter-chip--genre-homme[b-a4jfm646ag] {
    color: var(--ds-accent-active);
    border-color: var(--ds-purple);
}
.caisse-filter-chip--genre-homme.caisse-filter-chip--on[b-a4jfm646ag] {
    background: var(--ds-accent-active);
    color: var(--ds-text-inverse);
    border-color: var(--ds-accent-active);
}
.caisse-filter-chip--genre-femme[b-a4jfm646ag] {
    color: #c2410c;
    border-color: #fed7aa;
}
html[data-theme="dark"] .caisse-filter-chip--genre-femme[b-a4jfm646ag] {
    color: #fdba74;
    border-color: color-mix(in srgb, var(--ds-accent) 35%, var(--ds-border));
}
.caisse-filter-chip--genre-femme.caisse-filter-chip--on[b-a4jfm646ag] {
    background: #fb923c;
    color: #1a0f0a;
    border-color: #fb923c;
}
.caisse-state[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ds-text-muted);
}
.caisse-state-icon[b-a4jfm646ag] {
    font-size: 3rem;
    opacity: 0.22;
    color: var(--ds-text-muted);
}
.caisse-state-title[b-a4jfm646ag] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text-sub);
}
.caisse-btn-primary-sm[b-a4jfm646ag] {
    background: var(--ds-accent);
    color: var(--ds-text-inverse);
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.caisse-btn-primary-sm:hover[b-a4jfm646ag] {
    filter: brightness(1.06);
    box-shadow: 0 4px 14px var(--ds-accent-ring);
}
.caisse-product-grid[b-a4jfm646ag] {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: grid;
    gap: 14px;
    align-content: start;
}
.caisse-product-card[b-a4jfm646ag] {
    background: var(--ds-bg-surface);
    border: 2px solid var(--ds-border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 295px;
    box-shadow: var(--ds-shadow-xs);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.caisse-product-card:hover:not(.caisse-product-card--out)[b-a4jfm646ag] {
    border-color: var(--ds-accent);
    box-shadow: var(--ds-shadow-sm), var(--ds-glow-sm);
    transform: translateY(-2px);
}
.caisse-product-card--out[b-a4jfm646ag] {
    border-color: color-mix(in srgb, var(--ds-danger) 55%, var(--ds-border));
    opacity: 0.85;
    cursor: not-allowed;
    filter: grayscale(0.25);
}
.caisse-product-card--low[b-a4jfm646ag] {
    border-color: color-mix(in srgb, var(--ds-warning) 55%, var(--ds-border));
}
.caisse-product-media[b-a4jfm646ag] {
    height: 158px;
    min-height: 158px;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--ds-bg-elevated) 0%, var(--ds-bg-app) 55%, color-mix(in srgb, var(--ds-bg-surface) 88%, #000) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.caisse-product-media[b-a4jfm646ag]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, transparent 40%, rgba(0,0,0,.12) 100%);
}
.caisse-product-img-frame[b-a4jfm646ag] {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}
.caisse-product-img[b-a4jfm646ag] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transition: transform 0.2s ease;
}
.caisse-product-card:hover:not(.caisse-product-card--out) .caisse-product-img[b-a4jfm646ag] {
    transform: scale(1.02);
}
.caisse-product-icon-fallback[b-a4jfm646ag] {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    position: relative;
    z-index: 0;
}
.caisse-product-icon-fallback--hero[b-a4jfm646ag] {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    margin: 0;
    font-size: 2.75rem;
    background: linear-gradient(155deg, rgba(255,255,255,.04) 0%, transparent 50%, rgba(0,0,0,.06) 100%);
}
.caisse-product-icon-fallback[data-genre="Homme"][b-a4jfm646ag] {
    background: radial-gradient(ellipse 90% 100% at 50% 120%, rgba(234, 88, 12, 0.35), transparent 55%),
                linear-gradient(155deg, rgba(234, 88, 12, 0.12), rgba(234, 88, 12, 0.04));
    color: #ea580c;
}
.caisse-product-icon-fallback[data-genre="Femme"][b-a4jfm646ag] {
    background: radial-gradient(ellipse 90% 100% at 50% 120%, rgba(251, 146, 60, 0.35), transparent 55%),
                linear-gradient(155deg, rgba(251, 146, 60, 0.12), rgba(251, 146, 60, 0.04));
    color: #fb923c;
}
.caisse-product-icon-fallback:not([data-genre="Homme"]):not([data-genre="Femme"])[b-a4jfm646ag] {
    background: radial-gradient(ellipse 90% 100% at 50% 120%, rgba(253, 230, 138, 0.22), transparent 55%),
                linear-gradient(155deg, rgba(253, 230, 138, 0.1), rgba(253, 230, 138, 0.03));
    color: #fdba74;
}
html[data-theme="light"] .caisse-product-icon-fallback:not([data-genre="Homme"]):not([data-genre="Femme"])[b-a4jfm646ag] {
    color: #c2410c;
}
.caisse-product-icon-fallback--sm[b-a4jfm646ag] {
    display: none;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    margin: 0;
    background: linear-gradient(155deg, var(--ds-accent-dim), color-mix(in srgb, var(--ds-bg-app) 70%, var(--ds-accent))) !important;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--ds-accent);
    z-index: 0;
}
.caisse-stock-badge[b-a4jfm646ag] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.caisse-stock-badge--out[b-a4jfm646ag] {
    background: var(--ds-danger);
    color: var(--ds-text-inverse);
}
.caisse-stock-badge--low[b-a4jfm646ag] {
    background: var(--ds-warning);
    color: #1a0f0a;
}
.caisse-product-add[b-a4jfm646ag] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    width: 38px;
    height: 38px;
    background: var(--ds-accent);
    border: none;
    border-radius: 10px;
    color: var(--ds-text-inverse);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px var(--ds-accent-ring);
    line-height: 1;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.caisse-product-add:hover[b-a4jfm646ag] {
    transform: scale(1.05);
    filter: brightness(1.05);
}
.caisse-product-body[b-a4jfm646ag] {
    flex: 1;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0; /* allow flex child to shrink properly */
}
.caisse-product-title[b-a4jfm646ag] {
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
/* ── Meta row : ID badge + stock badge côte-à-côte ── */
.caisse-product-meta-row[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-top: 1px;
}
.caisse-product-ref-badge[b-a4jfm646ag] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(148,163,184,.13);
    color: var(--ds-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
html[data-theme="dark"] .caisse-product-ref-badge[b-a4jfm646ag] {
    background: rgba(148,163,184,.15);
}
.caisse-product-stock-badge[b-a4jfm646ag] {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.02em;
}
.caisse-product-stock-badge--ok[b-a4jfm646ag] {
    background: var(--ds-success-dim);
    color: var(--ds-success);
}
.caisse-product-stock-badge--low[b-a4jfm646ag] {
    background: rgba(245,158,11,.15);
    color: #d97706;
}
html[data-theme="dark"] .caisse-product-stock-badge--low[b-a4jfm646ag] {
    color: #fbbf24;
}
.caisse-product-stock-badge--out[b-a4jfm646ag] {
    background: var(--ds-danger-dim);
    color: var(--ds-danger);
}
.cpb-genre[b-a4jfm646ag] {
    opacity: .75;
    font-size: 10px;
}
/* keep old mini-tag classes in case they're used elsewhere */
.caisse-product-tags[b-a4jfm646ag] { display: none; }
.caisse-mini-tag[b-a4jfm646ag] { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.caisse-mini-tag--homme[b-a4jfm646ag] { background: rgba(234,88,12,.12); color: #ea580c; }
.caisse-mini-tag--femme[b-a4jfm646ag] { background: rgba(251,146,60,.12); color: #c2410c; }
html[data-theme="dark"] .caisse-mini-tag--femme[b-a4jfm646ag] { color: #fdba74; }
.caisse-mini-tag--genre-neutral[b-a4jfm646ag] { background: var(--ds-accent-dim); color: var(--ds-text-sub); }
.caisse-mini-tag--qty-ok[b-a4jfm646ag] { background: var(--ds-success-dim); color: var(--ds-success); }
.caisse-mini-tag--qty-low[b-a4jfm646ag] { background: var(--ds-warning-dim); color: var(--ds-warning); }
.caisse-mini-tag--qty-out[b-a4jfm646ag] { background: var(--ds-danger-dim); color: var(--ds-danger); }
.caisse-product-footer[b-a4jfm646ag] {
    margin-top: auto;
    padding-top: 7px;
    border-top: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.caisse-product-price[b-a4jfm646ag] {
    font-size: 17px;
    font-weight: 900;
    color: var(--ds-text);
    line-height: 1;
    white-space: nowrap;
}
.caisse-product-price-cur[b-a4jfm646ag] {
    font-size: 11px;
    font-weight: 500;
    color: var(--ds-text-muted);
    margin-left: 2px;
}
.caisse-product-unavailable[b-a4jfm646ag] {
    font-size: 11px;
    color: var(--ds-danger);
    font-weight: 600;
}

/* ── Design Tokens ──────────────────────────────────────────────── */
/* NOTE: --pos-* variables are defined globally in app.css
   because Blazor CSS isolation scopes :root as :root[b-xxxx]
   which never matches the <html> element. */

/* ═══════════════════════════════════════════════════════════════
   SHELL
═══════════════════════════════════════════════════════════════ */
.pos-shell[b-a4jfm646ag] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--pos-bg, #F0F2F7) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.pos-sidebar[b-a4jfm646ag] {
    width: 62px;
    background: var(--pos-sidebar-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.04);
    z-index: 10;
}

.pos-logo[b-a4jfm646ag] {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--pos-accent);
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex-shrink: 0;
    text-shadow: 0 0 20px rgba(255,106,0,.4);
}

.pos-nav-links[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 4px;
}

.pos-nav-link[b-a4jfm646ag] {
    width: 44px;
    height: 44px;
    border-radius: var(--r10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--pos-on-dk-sub);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--tr);
    position: relative;
}
.pos-nav-link:hover[b-a4jfm646ag] {
    background: rgba(255,255,255,.07);
    color: var(--pos-on-dk);
}
.pos-nav-link.active[b-a4jfm646ag] {
    background: rgba(255,106,0,.15);
    color: var(--pos-accent);
    box-shadow: 0 0 0 1px rgba(255,106,0,.25);
}
.pos-nav-link.active[b-a4jfm646ag]::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: var(--pos-accent);
    border-radius: 0 3px 3px 0;
}
.pos-nav-link.spinning i[b-a4jfm646ag] {
    animation: spin-b-a4jfm646ag .65s linear infinite;
    display: inline-block;
}

.pos-nav-bottom[b-a4jfm646ag] {
    padding: 12px 0 14px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN AREA
═══════════════════════════════════════════════════════════════ */
.pos-main[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════════ */
.pos-topbar[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 62px;
    padding: 0 1.25rem;
    background: var(--pos-topbar-bg);
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
    z-index: 50;
}

.pos-topbar-left[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.pos-title[b-a4jfm646ag] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: .02em;
    margin: 0;
}

.pos-badge-live[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .64rem;
    font-weight: 700;
    padding: .22rem .6rem;
    border-radius: var(--r6);
    background: rgba(16,185,129,.12);
    color: var(--pos-green);
    border: 1px solid rgba(16,185,129,.2);
}
.pos-badge-live i[b-a4jfm646ag] {
    font-size: .38rem;
    animation: pulse-dot-b-a4jfm646ag .9s infinite;
}

.pos-badge-off[b-a4jfm646ag] {
    font-size: .64rem;
    font-weight: 600;
    padding: .22rem .6rem;
    border-radius: var(--r6);
    background: rgba(255,255,255,.04);
    color: var(--pos-on-dk-sub);
    border: 1px solid rgba(255,255,255,.08);
}

.pos-topbar-center[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pos-store-pill[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .95rem;
    border-radius: var(--r999);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    transition: border-color var(--tr);
}
.pos-store-pill:hover[b-a4jfm646ag] {
    border-color: rgba(255,106,0,.35);
}
.pos-store-pill i[b-a4jfm646ag] {
    color: var(--pos-accent);
    font-size: .85rem;
}

.pos-store-sel[b-a4jfm646ag] {
    background: transparent;
    border: none;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    min-width: 150px;
}
.pos-store-sel option[b-a4jfm646ag] {
    background: #0F1320;
}

.pos-store-ext[b-a4jfm646ag] {
    color: var(--pos-on-dk-sub);
    text-decoration: none;
    font-size: .78rem;
    transition: color var(--tr);
    padding: 2px;
}
.pos-store-ext:hover[b-a4jfm646ag] {
    color: var(--pos-accent);
}

.pos-topbar-right[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}

.pos-session-btn[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: var(--r8);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--tr);
    letter-spacing: .01em;
}
.pos-session-open[b-a4jfm646ag] {
    background: var(--pos-accent);
    color: #fff;
    box-shadow: 0 3px 12px var(--pos-accent-glow);
}
.pos-session-open:hover[b-a4jfm646ag] {
    background: #ff7d1a;
    box-shadow: 0 5px 20px rgba(255,106,0,.55);
    transform: translateY(-1px);
}
.pos-session-close[b-a4jfm646ag] {
    background: rgba(239,68,68,.1);
    color: var(--pos-red);
    border-color: rgba(239,68,68,.25);
}
.pos-session-close:hover[b-a4jfm646ag] {
    background: rgba(239,68,68,.18);
}

.pos-avatar[b-a4jfm646ag] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,106,0,.14);
    border: 2px solid rgba(255,106,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pos-accent);
    font-size: .88rem;
    cursor: pointer;
    transition: all var(--tr);
    flex-shrink: 0;
}
.pos-avatar:hover[b-a4jfm646ag] {
    background: rgba(255,106,0,.22);
    border-color: var(--pos-accent);
}

/* ═══════════════════════════════════════════════════════════════
   WORKSPACE — 2 COLUMNS  (left: products, right: cart)
═══════════════════════════════════════════════════════════════ */
.pos-workspace[b-a4jfm646ag] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    background: var(--pos-bg);
    min-height: 0;
}

/* ── Search zone ──────────────────────────────────────────────── */
.pos-search-zone[b-a4jfm646ag] {
    padding: .95rem 1.1rem .75rem;
    background: var(--pos-white);
    border-bottom: 1px solid var(--pos-border);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex-shrink: 0;
}

/* Row containing search input + scan button */
.pos-search-row[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.pos-search-wrap[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    border-radius: var(--r999);
    padding: 0 1rem;
    transition: border-color var(--tr), box-shadow var(--tr);
}
.pos-search-wrap:focus-within[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 3px var(--pos-accent-lt);
}

.pos-search-ico[b-a4jfm646ag] {
    color: var(--pos-muted);
    font-size: .82rem;
    flex-shrink: 0;
}

.pos-search-input[b-a4jfm646ag] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--pos-text);
    font-size: .88rem;
    padding: .72rem 0;
    outline: none;
}
.pos-search-input[b-a4jfm646ag]::placeholder {
    color: var(--pos-muted);
}

.pos-search-clear[b-a4jfm646ag] {
    background: none;
    border: none;
    color: var(--pos-muted);
    font-size: .75rem;
    cursor: pointer;
    padding: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: color var(--tr);
}
.pos-search-clear:hover[b-a4jfm646ag] {
    color: var(--pos-red);
}

/* ── Scan button ─────────────────────────────────────────────── */
.pos-scan-btn[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .35rem;
    height: 44px;
    padding: 0 .95rem;
    border-radius: var(--r999);
    border: 1.5px solid var(--pos-border);
    background: var(--pos-surface);
    color: var(--pos-sub);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--tr);
    white-space: nowrap;
}
.pos-scan-btn i[b-a4jfm646ag] { font-size: 1.05rem; }
.pos-scan-btn:hover[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
    background: var(--pos-accent-lt);
}
.pos-scan-btn.active[b-a4jfm646ag] {
    background: var(--pos-accent);
    border-color: var(--pos-accent);
    color: #fff;
    box-shadow: 0 3px 12px var(--pos-accent-glow);
}
.pos-scan-btn span[b-a4jfm646ag] {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
}

/* ── Scan zone (expanded) ───────────────────────────────────── */
.pos-scan-zone[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,106,0,.04);
    border: 2px dashed rgba(255,106,0,.35);
    border-radius: var(--r12);
    padding: .45rem 1rem;
    animation: slideDown-b-a4jfm646ag .18s ease;
    transition: border-color var(--tr);
}
.pos-scan-zone:focus-within[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    border-style: solid;
    background: var(--pos-accent-lt);
    box-shadow: 0 0 0 3px var(--pos-accent-lt);
}

.pos-scan-ico[b-a4jfm646ag] {
    color: var(--pos-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.pos-scan-input[b-a4jfm646ag] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--pos-text);
    font-size: .92rem;
    font-weight: 600;
    padding: .45rem 0;
    outline: none;
    letter-spacing: .02em;
}
.pos-scan-input[b-a4jfm646ag]::placeholder {
    color: var(--pos-muted);
    font-weight: 400;
}

.pos-scan-hint[b-a4jfm646ag] {
    font-size: .65rem;
    color: var(--pos-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-style: italic;
}

/* ── Size control ────────────────────────────────────────────── */
.pos-size-control[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    flex-shrink: 0;
}
.pos-size-label[b-a4jfm646ag] {
    font-size: .68rem;
    font-weight: 700;
    color: var(--pos-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: .2rem;
}
.pos-size-btn[b-a4jfm646ag] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1.5px solid var(--pos-border, #E5E7EB);
    background: transparent;
    cursor: pointer;
    color: var(--pos-sub, #6B7280);
    font-size: .7rem;
    font-weight: 700;
    transition: all .16s ease;
    line-height: 1;
}
.pos-size-btn:hover[b-a4jfm646ag] {
    border-color: var(--pos-accent, #FF6A00);
    color: var(--pos-accent, #FF6A00);
    background: var(--pos-accent-lt, rgba(255,106,0,.1));
}
.pos-size-btn.active[b-a4jfm646ag] {
    background: var(--pos-accent, #FF6A00);
    border-color: var(--pos-accent, #FF6A00);
    color: #fff;
    box-shadow: 0 2px 8px var(--pos-accent-glow, rgba(255,106,0,.35));
}

/* ── Filter tabs ──────────────────────────────────────────────── */
.pos-filter-tabs[b-a4jfm646ag] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.pos-filter-tab[b-a4jfm646ag] {
    padding: .32rem .9rem;
    border-radius: var(--r999);
    background: transparent;
    border: 1.5px solid var(--pos-border);
    color: var(--pos-sub);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tr);
}
.pos-filter-tab:hover[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
    background: var(--pos-accent-lt);
}
.pos-filter-tab.active[b-a4jfm646ag] {
    background: var(--pos-accent);
    color: #fff;
    border-color: var(--pos-accent);
    box-shadow: 0 2px 10px var(--pos-accent-glow);
}
.pos-filter-tab.blue:hover[b-a4jfm646ag]  { border-color: var(--pos-blue); color: var(--pos-blue); }
.pos-filter-tab.blue.active[b-a4jfm646ag] { background: var(--pos-blue); border-color: var(--pos-blue); box-shadow: 0 2px 10px rgba(249,115,22,.3); }
.pos-filter-tab.pink:hover[b-a4jfm646ag]  { border-color: var(--pos-rose); color: var(--pos-rose); }
.pos-filter-tab.pink.active[b-a4jfm646ag] { background: var(--pos-rose); border-color: var(--pos-rose); box-shadow: 0 2px 10px rgba(236,72,153,.3); }

/* ── Intelligence banner ─────────────────────────────────────── */
.pos-intel-banner[b-a4jfm646ag] {
    margin: .7rem 1.1rem 0;
    padding: .8rem 1rem;
    border-radius: var(--r12);
    background: rgba(255,106,0,.05);
    border: 1px solid rgba(255,106,0,.2);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex-shrink: 0;
}

.pos-intel-top[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.pos-intel-top i[b-a4jfm646ag]    { color: var(--pos-accent); }
.pos-intel-top strong[b-a4jfm646ag] { font-size: .82rem; color: var(--pos-accent); }
.pos-intel-client[b-a4jfm646ag] { font-size: .74rem; color: var(--pos-text2); }
.pos-intel-price[b-a4jfm646ag]  { font-size: .84rem; font-weight: 800; color: var(--pos-green); margin-left: auto; }

.pos-intel-close[b-a4jfm646ag] {
    background: none;
    border: none;
    color: var(--pos-muted);
    cursor: pointer;
    font-size: .72rem;
    padding: 2px 5px;
    border-radius: var(--r6);
    transition: all var(--tr);
}
.pos-intel-close:hover[b-a4jfm646ag] { color: var(--pos-red); background: rgba(239,68,68,.08); }

.pos-intel-items[b-a4jfm646ag] { display: flex; flex-wrap: wrap; gap: .3rem; }

.pos-intel-tag[b-a4jfm646ag] {
    font-size: .7rem;
    padding: .2rem .55rem;
    border-radius: 7px;
    cursor: pointer;
    background: rgba(255,106,0,.07);
    border: 1px solid rgba(255,106,0,.2);
    color: var(--pos-accent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .25rem;
    transition: all var(--tr);
}
.pos-intel-tag:hover[b-a4jfm646ag] { background: rgba(255,106,0,.14); }
.pos-intel-tag span[b-a4jfm646ag] { color: var(--pos-green); font-size: .62rem; }

/* ── Alert strip ─────────────────────────────────────────────── */
.pos-alert-strip[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .48rem 1.1rem;
    font-size: .75rem;
    color: var(--pos-yellow);
    background: rgba(245,158,11,.06);
    border-bottom: 1px solid rgba(245,158,11,.15);
    flex-shrink: 0;
}
.pos-alert-link[b-a4jfm646ag] {
    margin-left: auto;
    font-weight: 700;
    color: var(--pos-yellow);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT GRID
═══════════════════════════════════════════════════════════════ */
.pos-catalog[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--pos-border);
}

.pos-grid[b-a4jfm646ag] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--pos-grid-min, 260px), 1fr));
    gap: 1.25rem;
    align-content: start;
    min-height: 0;
    transition: grid-template-columns .25s ease;
}

/* ── Tailles de grille (contrôle zoom) ─────────────────────── */
/* XS — compact, beaucoup de colonnes */
.pos-grid.size-xs[b-a4jfm646ag] { --pos-grid-min: 155px; }
.pos-grid.size-xs .pos-card-img[b-a4jfm646ag] { height: 100px; }
.pos-grid.size-xs .pos-card-body[b-a4jfm646ag] { padding: .5rem .65rem; }
.pos-grid.size-xs .pos-card-name[b-a4jfm646ag] { font-size: .74rem; }
.pos-grid.size-xs .pos-card-price[b-a4jfm646ag] { font-size: .85rem; }
.pos-grid.size-xs .pos-card-footer[b-a4jfm646ag] { padding: .4rem .65rem; }
.pos-grid.size-xs .pos-add-btn[b-a4jfm646ag] { width: 28px; height: 28px; font-size: .76rem; }

/* SM */
.pos-grid.size-sm[b-a4jfm646ag] { --pos-grid-min: 200px; }
.pos-grid.size-sm .pos-card-img[b-a4jfm646ag] { height: 130px; }
.pos-grid.size-sm .pos-card-name[b-a4jfm646ag] { font-size: .82rem; }

/* MD — normal */
.pos-grid.size-md[b-a4jfm646ag] { --pos-grid-min: 240px; }
.pos-grid.size-md .pos-card-img[b-a4jfm646ag] { height: 155px; }

/* LG — default boutique (cartes claires et grandes) */
.pos-grid.size-lg[b-a4jfm646ag] { --pos-grid-min: 280px; }
.pos-grid.size-lg .pos-card-img[b-a4jfm646ag] { height: 185px; }
.pos-grid.size-lg .pos-card-icon[b-a4jfm646ag] { width: 80px; height: 80px; font-size: 2rem; }
.pos-grid.size-lg .pos-card-name[b-a4jfm646ag] { font-size: 1.05rem; }
.pos-grid.size-lg .pos-card-price[b-a4jfm646ag] { font-size: 1.25rem; }
.pos-grid.size-lg .pos-add-btn[b-a4jfm646ag] { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 12px; }

/* XL — quelques grandes cartes */
.pos-grid.size-xl[b-a4jfm646ag] { --pos-grid-min: 360px; }
.pos-grid.size-xl .pos-card-img[b-a4jfm646ag] { height: 230px; }
.pos-grid.size-xl .pos-card-icon[b-a4jfm646ag] { width: 100px; height: 100px; font-size: 2.5rem; }
.pos-grid.size-xl .pos-card-name[b-a4jfm646ag] { font-size: 1.2rem; }
.pos-grid.size-xl .pos-card-price[b-a4jfm646ag] { font-size: 1.5rem; }
.pos-grid.size-xl .pos-card-body[b-a4jfm646ag] { padding: 1.1rem 1.2rem; }
.pos-grid.size-xl .pos-card-footer[b-a4jfm646ag] { padding: .85rem 1.1rem; }
.pos-grid.size-xl .pos-add-btn[b-a4jfm646ag] { width: 52px; height: 52px; font-size: 1.3rem; border-radius: 14px; }

/* ── Product card ─────────────────────────────────────────────── */
.pos-card[b-a4jfm646ag] {
    background: var(--pos-white, #FFFFFF) !important;
    border: 1.5px solid var(--pos-border, #E5E7EB) !important;
    border-radius: var(--r16, 16px) !important;
    color: var(--pos-text, #111827) !important;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--tr, 160ms ease), box-shadow var(--tr, 160ms ease), border-color var(--tr, 160ms ease);
    user-select: none;
    box-shadow: var(--pos-shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}
.pos-card:hover:not(.out)[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 8px 28px rgba(255,106,0,.16), 0 2px 8px rgba(0,0,0,.07);
    transform: translateY(-4px) scale(1.01);
}
.pos-card:active:not(.out)[b-a4jfm646ag] {
    transform: scale(.97);
    transition: transform .09s;
}
.pos-card.out[b-a4jfm646ag]  { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.pos-card.low[b-a4jfm646ag]  { border-color: rgba(245,158,11,.35); }

.pos-card-img[b-a4jfm646ag] {
    height: 160px;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ds-bg-elevated) 0%, var(--ds-bg-app) 100%) !important;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.pos-card-img img[b-a4jfm646ag] {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: 10px;
}

.pos-card-icon[b-a4jfm646ag] {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
}
.pos-card-icon.blue[b-a4jfm646ag] { background: rgba(249,115,22,.1);  color: var(--pos-blue); }
.pos-card-icon.rose[b-a4jfm646ag] { background: rgba(236,72,153,.1);  color: var(--pos-rose); }
.pos-card-icon.teal[b-a4jfm646ag] { background: rgba(20,184,166,.1);  color: var(--pos-teal); }

.pos-stock-badge[b-a4jfm646ag] {
    position: absolute;
    top: 7px;
    left: 7px;
    font-size: .56rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pos-stock-badge.out[b-a4jfm646ag] { background: var(--pos-red); color: #fff; }
.pos-stock-badge.low[b-a4jfm646ag] { background: var(--pos-yellow); color: #000; }

.pos-card-body[b-a4jfm646ag] {
    padding: .85rem 1rem;
}

.pos-card-name[b-a4jfm646ag] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--pos-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: .4rem;
}

.pos-card-meta[b-a4jfm646ag] {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
}

.pos-tag[b-a4jfm646ag] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
}
.pos-tag.blue[b-a4jfm646ag] { background: rgba(249,115,22,.1);  color: var(--pos-blue); }
.pos-tag.rose[b-a4jfm646ag] { background: rgba(236,72,153,.1);  color: var(--pos-rose); }
.pos-tag.ok[b-a4jfm646ag]   { background: rgba(16,185,129,.1);  color: var(--pos-green); }
.pos-tag.low[b-a4jfm646ag]  { background: rgba(245,158,11,.1);  color: var(--pos-yellow); }
.pos-tag.out[b-a4jfm646ag]  { background: rgba(239,68,68,.1);   color: var(--pos-red); }

.pos-card-footer[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .85rem .75rem;
    margin-top: -.1rem;
}

.pos-card-price[b-a4jfm646ag] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--pos-text);
}
.pos-card-price small[b-a4jfm646ag] {
    font-size: .68rem;
    font-weight: 500;
    color: var(--pos-muted);
}

/* + Button on each card — large enough to tap in shop */
.pos-add-btn[b-a4jfm646ag] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--pos-accent);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: 700;
    transition: all var(--tr);
    box-shadow: 0 3px 10px var(--pos-accent-glow);
    flex-shrink: 0;
}
.pos-add-btn:hover[b-a4jfm646ag] {
    background: #ff7d1a;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255,106,0,.55);
}

/* State boxes */
.pos-state[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--pos-muted);
    font-size: .85rem;
}

.pos-spinner[b-a4jfm646ag] {
    width: 32px;
    height: 32px;
    border: 2.5px solid var(--pos-border);
    border-top-color: var(--pos-accent);
    border-radius: 50%;
    animation: spin-b-a4jfm646ag .75s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   CART PANEL — RIGHT COLUMN
═══════════════════════════════════════════════════════════════ */
.pos-cart-panel[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--pos-white);
    overflow: hidden;
    border-left: 1px solid var(--pos-border);
}

/* ── Cart header ──────────────────────────────────────────────── */
.pos-cart-head[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--pos-border);
    flex-shrink: 0;
    background: var(--pos-white);
}

.pos-cart-title[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--pos-text);
}
.pos-cart-title i[b-a4jfm646ag] { color: var(--pos-accent); }

.pos-cart-count[b-a4jfm646ag] {
    background: var(--pos-accent);
    color: #fff;
    font-size: .62rem;
    font-weight: 900;
    border-radius: 5px;
    padding: .1rem .42rem;
    min-width: 20px;
    text-align: center;
}

.pos-clear-btn[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .3rem;
    background: none;
    border: 1px solid var(--pos-border);
    color: var(--pos-muted);
    font-size: .72rem;
    font-weight: 600;
    padding: .32rem .65rem;
    border-radius: var(--r8);
    cursor: pointer;
    transition: all var(--tr);
}
.pos-clear-btn:hover[b-a4jfm646ag] {
    border-color: var(--pos-red);
    color: var(--pos-red);
    background: rgba(239,68,68,.04);
}

/* ── Cart body — hauteur au contenu + plafond pour ne pas pousser le paiement en bas de l’écran quand le panier est vide ── */
.pos-cart-body[b-a4jfm646ag] {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(42vh, 380px);
    overflow-y: auto;
    padding: .7rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pos-cart-empty[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 7.5rem;
    padding: .5rem 0;
    text-align: center;
    color: var(--pos-muted);
}
.pos-cart-empty i[b-a4jfm646ag]  { font-size: 2.75rem; opacity: .18; }
.pos-cart-empty p[b-a4jfm646ag]  { font-size: .88rem; font-weight: 600; margin: 0; color: var(--pos-sub); }
.pos-cart-empty small[b-a4jfm646ag] { font-size: .74rem; opacity: .75; }

/* ── Cart item ──────────────────────────────────────────────────── */
.pos-cart-item[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .75rem;
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    border-radius: var(--r12);
    transition: border-color var(--tr), box-shadow var(--tr);
}
.pos-cart-item:hover[b-a4jfm646ag] {
    border-color: rgba(255,106,0,.3);
    box-shadow: 0 2px 8px rgba(255,106,0,.1);
}

.pos-cart-item-ico[b-a4jfm646ag] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--pos-accent-lt);
    color: var(--pos-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.pos-cart-item-info[b-a4jfm646ag] { flex: 1; min-width: 0; }

.pos-cart-item-name[b-a4jfm646ag] {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--pos-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-cart-item-sub[b-a4jfm646ag] {
    font-size: .68rem;
    color: var(--pos-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.pos-stock-dot[b-a4jfm646ag] { font-size: .62rem; }

/* Qty controls */
.pos-qty-ctrl[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

.pos-qty-btn[b-a4jfm646ag] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--pos-white);
    border: 1.5px solid var(--pos-border);
    color: var(--pos-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    transition: all var(--tr);
}
.pos-qty-btn:hover[b-a4jfm646ag] {
    background: var(--pos-accent);
    border-color: var(--pos-accent);
    color: #fff;
}

.pos-qty-num[b-a4jfm646ag] {
    font-size: .95rem;
    font-weight: 800;
    color: var(--pos-text);
    min-width: 24px;
    text-align: center;
}

.pos-cart-item-right[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    flex-shrink: 0;
}

.pos-cart-item-price[b-a4jfm646ag] {
    font-size: .82rem;
    font-weight: 800;
    color: var(--pos-text);
}

.pos-del-btn[b-a4jfm646ag] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: none;
    border: none;
    color: var(--pos-muted);
    font-size: .75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--tr);
}
.pos-del-btn:hover[b-a4jfm646ag] {
    color: var(--pos-red);
    background: rgba(239,68,68,.1);
}

/* ═══════════════════════════════════════════════════════════════
   TOTALS
═══════════════════════════════════════════════════════════════ */
.pos-totals[b-a4jfm646ag] {
    padding: .9rem 1.1rem;
    border-top: 1px solid var(--pos-border);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex-shrink: 0;
    background: var(--pos-white);
}

.pos-total-row[b-a4jfm646ag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    color: var(--pos-sub);
}

.pos-discount-wrap[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.pos-disc-sep[b-a4jfm646ag] {
    font-size: .68rem;
    color: var(--pos-muted);
}

.pos-disc-input[b-a4jfm646ag] {
    width: 58px;
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    color: var(--pos-text);
    font-size: .76rem;
    padding: .3rem .45rem;
    border-radius: var(--r8);
    outline: none;
    text-align: center;
    transition: border-color var(--tr);
}
.pos-disc-input:focus[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 2px var(--pos-accent-lt);
}

.pos-total-main[b-a4jfm646ag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: .65rem;
    margin-top: .2rem;
    border-top: 2px solid var(--pos-border);
    font-size: .72rem;
    font-weight: 700;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.pos-total-value[b-a4jfm646ag] {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--pos-text);
    letter-spacing: -.01em;
}
.pos-total-value small[b-a4jfm646ag] {
    font-size: .72rem;
    font-weight: 500;
    color: var(--pos-muted);
    margin-left: .15rem;
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT SECTION
═══════════════════════════════════════════════════════════════ */
.pos-client-section[b-a4jfm646ag] {
    border-top: 1px solid var(--pos-border);
    flex-shrink: 0;
}

.pos-section-toggle[b-a4jfm646ag] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    background: none;
    border: none;
    color: var(--pos-sub);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--tr);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pos-section-toggle:hover[b-a4jfm646ag],
.pos-section-toggle.open[b-a4jfm646ag] { color: var(--pos-accent); }

.pos-client-fields[b-a4jfm646ag] {
    padding: .4rem 1.1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.pos-input[b-a4jfm646ag] {
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    color: var(--pos-text);
    font-size: .82rem;
    padding: .55rem .85rem;
    border-radius: var(--r10);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--tr);
}
.pos-input:focus[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 3px var(--pos-accent-lt);
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT
═══════════════════════════════════════════════════════════════ */
.pos-pay-section[b-a4jfm646ag] {
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--pos-border);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex-shrink: 0;
}

.pos-pay-label[b-a4jfm646ag] {
    font-size: .6rem;
    font-weight: 700;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .09em;
}

.pos-pay-methods[b-a4jfm646ag] {
    display: flex;
    gap: .4rem;
}

.pos-pay-method-btn[b-a4jfm646ag] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .65rem .3rem;
    border-radius: var(--r10);
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    color: var(--pos-sub);
    font-size: .68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tr);
}
.pos-pay-method-btn i[b-a4jfm646ag] { font-size: 1rem; }
.pos-pay-method-btn:hover[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
    background: var(--pos-accent-lt);
}
.pos-pay-method-btn.active[b-a4jfm646ag] {
    background: var(--pos-accent-lt);
    border-color: var(--pos-accent);
    color: var(--pos-accent);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255,106,0,.2);
}

/* ═══════════════════════════════════════════════════════════════
   CASH SECTION
═══════════════════════════════════════════════════════════════ */
.pos-cash-section[b-a4jfm646ag] {
    padding: .55rem 1.1rem;
    border-top: 1px solid var(--pos-border);
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex-shrink: 0;
}

.pos-cash-input[b-a4jfm646ag] {
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    color: var(--pos-text);
    font-size: 1.3rem;
    font-weight: 800;
    padding: .7rem .9rem;
    border-radius: var(--r10);
    outline: none;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--tr);
}
.pos-cash-input:focus[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 3px var(--pos-accent-lt);
}

.pos-change-badge[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--pos-green);
    background: var(--pos-green-lt);
    padding: .42rem;
    border-radius: var(--r8);
    border: 1px solid rgba(16,185,129,.2);
}

.pos-quick-cash[b-a4jfm646ag] { display: flex; gap: .3rem; }

.pos-quick-btn[b-a4jfm646ag] {
    flex: 1;
    padding: .38rem .2rem;
    text-align: center;
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    color: var(--pos-sub);
    font-size: .72rem;
    font-weight: 700;
    border-radius: var(--r8);
    cursor: pointer;
    transition: all var(--tr);
}
.pos-quick-btn:hover[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
    background: var(--pos-accent-lt);
}
.pos-quick-btn.exact[b-a4jfm646ag] {
    border-color: rgba(255,106,0,.3);
    color: var(--pos-accent);
}
.pos-quick-btn.exact:hover[b-a4jfm646ag] {
    background: var(--pos-accent-lt);
}

/* ═══════════════════════════════════════════════════════════════
   VALIDATE BUTTON (ORANGE GLOW)
═══════════════════════════════════════════════════════════════ */
.pos-footer[b-a4jfm646ag] {
    padding: .9rem 1rem 1rem;
    border-top: 1px solid var(--pos-border);
    flex-shrink: 0;
    background: var(--pos-white);
}

.pos-validate-btn[b-a4jfm646ag] {
    width: 100%;
    padding: 1.2rem;
    background: var(--pos-accent);
    border: none;
    border-radius: var(--r12);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    cursor: pointer;
    transition: all var(--tr);
    box-shadow:
        0 4px 18px var(--pos-accent-glow),
        inset 0 1px 0 rgba(255,255,255,.18);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.pos-validate-btn:hover:not(.disabled)[b-a4jfm646ag] {
    background: #ff7d1a;
    box-shadow:
        0 8px 30px rgba(255,106,0,.55),
        0 0 0 3px rgba(255,106,0,.15),
        inset 0 1px 0 rgba(255,255,255,.2);
    transform: translateY(-1px);
}
.pos-validate-btn:active:not(.disabled)[b-a4jfm646ag] {
    transform: translateY(0);
    box-shadow: 0 4px 14px var(--pos-accent-glow);
}
.pos-validate-btn.disabled[b-a4jfm646ag] {
    background: var(--pos-border);
    color: var(--pos-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.pos-feedback[b-a4jfm646ag] {
    margin-top: .55rem;
    padding: .5rem .9rem;
    border-radius: var(--r8);
    font-size: .76rem;
    font-weight: 600;
    text-align: center;
}
.pos-feedback.ok[b-a4jfm646ag]   { background: var(--pos-green-lt); color: var(--pos-green); border: 1px solid rgba(16,185,129,.2); }
.pos-feedback.info[b-a4jfm646ag] { background: rgba(249,115,22,.08); color: var(--pos-blue);  border: 1px solid rgba(249,115,22,.2); }
.pos-feedback.rp[b-a4jfm646ag]   { background: var(--pos-accent-lt); color: var(--pos-accent); border: 1px solid rgba(255,106,0,.2); }

/* ═══════════════════════════════════════════════════════════════
   MODALS (light theme)
═══════════════════════════════════════════════════════════════ */
.cx-overlay[b-a4jfm646ag] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(8px);
    animation: fadeIn-b-a4jfm646ag .2s ease;
}

.cx-modal[b-a4jfm646ag] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--pos-border);
    border-radius: var(--r16);
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    animation: modalIn-b-a4jfm646ag .22s ease;
    overflow: hidden;
    box-shadow: var(--ds-shadow-lg);
}
.cx-receipt-modal[b-a4jfm646ag] { max-width: 320px; }

.cx-receipt-modal-foot[b-a4jfm646ag] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.45rem;
    align-items: stretch;
}
.cx-receipt-modal-foot .cx-btn[b-a4jfm646ag] {
    font-size: 0.68rem;
    padding: 0.55rem 0.28rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}
.cx-btn-print-receipt i[b-a4jfm646ag] { color: var(--pos-accent); }

.cx-modal-head[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--pos-border);
    font-size: .88rem;
    font-weight: 700;
    color: var(--pos-text);
}
.cx-modal-head i[b-a4jfm646ag] { color: var(--pos-accent); }

.cx-modal-close[b-a4jfm646ag] {
    width: 30px;
    height: 30px;
    border-radius: var(--r8);
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    color: var(--pos-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    cursor: pointer;
    transition: all var(--tr);
}
.cx-modal-close:hover[b-a4jfm646ag] {
    border-color: var(--pos-red);
    color: var(--pos-red);
}

.cx-modal-body[b-a4jfm646ag] {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.cx-modal-foot[b-a4jfm646ag] {
    padding: .85rem 1.2rem;
    border-top: 1px solid var(--pos-border);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.cx-modal-store[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    background: var(--pos-surface);
    border-radius: var(--r10);
    border: 1px solid var(--pos-border);
    font-size: .84rem;
    color: var(--pos-text);
}
.cx-modal-store i[b-a4jfm646ag] { color: var(--pos-accent); }

.cx-label[b-a4jfm646ag] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: block;
    margin-bottom: .28rem;
}

.cx-modal-info[b-a4jfm646ag] {
    font-size: .74rem;
    color: var(--pos-muted);
    padding: .5rem .8rem;
    background: var(--pos-surface);
    border-radius: var(--r8);
    border: 1px solid var(--pos-border);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.cx-input[b-a4jfm646ag] {
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    color: var(--pos-text);
    font-size: .84rem;
    padding: .58rem .85rem;
    border-radius: var(--r10);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--tr);
}
.cx-input:focus[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 3px var(--pos-accent-lt);
}

/* Session summary */
.cx-sum-rows[b-a4jfm646ag] { display: flex; flex-direction: column; gap: .2rem; }
.cx-sum-row[b-a4jfm646ag] {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--pos-border);
    color: var(--pos-sub);
}
.cx-sum-row.green[b-a4jfm646ag] { color: var(--pos-green); font-weight: 700; }

.cx-diff[b-a4jfm646ag] {
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    padding: .55rem;
    border-radius: var(--r8);
}
.cx-diff.ok[b-a4jfm646ag]   { background: var(--pos-green-lt); color: var(--pos-green); border: 1px solid rgba(16,185,129,.2); }
.cx-diff.warn[b-a4jfm646ag] { background: rgba(239,68,68,.08); color: var(--pos-red);   border: 1px solid rgba(239,68,68,.2); }

/* Modal buttons */
.cx-btn[b-a4jfm646ag] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .52rem 1.15rem;
    border-radius: var(--r10);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--tr);
}
.cx-btn-primary[b-a4jfm646ag] {
    background: var(--pos-accent);
    color: #fff;
    box-shadow: 0 3px 12px var(--pos-accent-glow);
}
.cx-btn-primary:hover[b-a4jfm646ag] {
    background: #ff7d1a;
    box-shadow: 0 5px 20px rgba(255,106,0,.45);
    transform: translateY(-1px);
}
.cx-btn-ghost[b-a4jfm646ag] {
    background: var(--pos-surface);
    border-color: var(--pos-border);
    color: var(--pos-sub);
}
.cx-btn-ghost:hover[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
}
.cx-btn-danger[b-a4jfm646ag] {
    background: rgba(239,68,68,.08);
    color: var(--pos-red);
    border-color: rgba(239,68,68,.25);
}
.cx-btn-danger:hover[b-a4jfm646ag] { background: rgba(239,68,68,.16); }

/* ── Receipt ──────────────────────────────────────────────────── */
.cx-receipt[b-a4jfm646ag] {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .78rem;
    color: var(--pos-text);
    max-height: 62vh;
    overflow-y: auto;
}

.cx-receipt-brand[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .98rem;
    font-weight: 900;
    letter-spacing: .16em;
    color: var(--pos-accent);
    margin-bottom: .25rem;
}
.cx-receipt-store[b-a4jfm646ag]  { text-align: center; font-size: .72rem; color: var(--pos-sub); }
.cx-receipt-no[b-a4jfm646ag]     { text-align: center; font-size: .66rem; color: var(--pos-muted); font-weight: 700; letter-spacing: .1em; }
.cx-receipt-date[b-a4jfm646ag]   { text-align: center; font-size: .66rem; color: var(--pos-muted); }
.cx-receipt-sep[b-a4jfm646ag]    { height: 1px; background: var(--pos-border); margin: .25rem 0; }
.cx-receipt-row[b-a4jfm646ag]    { display: flex; justify-content: space-between; gap: .5rem; }
.cx-receipt-row.muted[b-a4jfm646ag] { color: var(--pos-muted); }
.cx-receipt-row.bold[b-a4jfm646ag]  { font-weight: 800; color: var(--pos-accent); font-size: .86rem; }
.cx-receipt-client[b-a4jfm646ag] { text-align: center; font-size: .7rem; color: var(--pos-muted); }
.cx-receipt-method[b-a4jfm646ag] { text-align: center; font-weight: 700; font-size: .74rem; color: var(--pos-sub); }
.cx-receipt-thanks[b-a4jfm646ag] {
    text-align: center;
    font-size: .76rem;
    font-weight: 700;
    color: var(--pos-accent);
    margin-top: .4rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn-b-a4jfm646ag  { from{opacity:0;} to{opacity:1;} }
@keyframes modalIn-b-a4jfm646ag { from{opacity:0; transform:scale(.93) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);} }
@keyframes spin-b-a4jfm646ag    { to{transform:rotate(360deg);} }
@keyframes pulse-dot-b-a4jfm646ag { 0%,100%{opacity:1;} 50%{opacity:.2;} }

/* ═══════════════════════════════════════════════════════════════
   SCROLLBARS
═══════════════════════════════════════════════════════════════ */
.pos-grid[b-a4jfm646ag]::-webkit-scrollbar,
.pos-cart-body[b-a4jfm646ag]::-webkit-scrollbar,
.cx-receipt[b-a4jfm646ag]::-webkit-scrollbar { width: 3px; }
.pos-grid[b-a4jfm646ag]::-webkit-scrollbar-thumb,
.pos-cart-body[b-a4jfm646ag]::-webkit-scrollbar-thumb,
.cx-receipt[b-a4jfm646ag]::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }
.pos-grid[b-a4jfm646ag]::-webkit-scrollbar-track,
.pos-cart-body[b-a4jfm646ag]::-webkit-scrollbar-track,
.cx-receipt[b-a4jfm646ag]::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .pos-workspace[b-a4jfm646ag] { grid-template-columns: 1fr 380px; }
}

@media (max-width: 1100px) {
    .pos-workspace[b-a4jfm646ag] { grid-template-columns: 1fr 340px; }
    .pos-grid[b-a4jfm646ag] { --pos-grid-min: 180px; }
}

@media (max-width: 900px) {
    .pos-workspace[b-a4jfm646ag] {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, auto);
    }
    .pos-catalog[b-a4jfm646ag] { min-height: 0; }
    .pos-cart-panel[b-a4jfm646ag] {
        max-height: min(50vh, 420px);
        overflow-y: auto;
    }
    /* Une seule zone de scroll (le panneau), pas panier + panneau. */
    .pos-cart-panel .pos-cart-body[b-a4jfm646ag] {
        flex: 0 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: visible;
    }
    .pos-cart-panel .chk-panel[b-a4jfm646ag] {
        flex: 0 0 auto;
        overflow-y: visible;
        min-height: 0;
    }
    .pos-grid[b-a4jfm646ag] { --pos-grid-min: 160px; }
}

@media (max-width: 640px) {
    .pos-sidebar[b-a4jfm646ag] { display: none; }
    .pos-topbar-center[b-a4jfm646ag] { display: none; }
    .pos-grid[b-a4jfm646ag] { --pos-grid-min: 140px; gap: .7rem; padding: .75rem; }
    .pos-topbar[b-a4jfm646ag] { padding: 0 .85rem; }
    .pos-card-img[b-a4jfm646ag] { height: 100px; }
    .pos-card-name[b-a4jfm646ag] { font-size: .82rem; }
    .pos-card-price[b-a4jfm646ag] { font-size: 1rem; }
    .pos-add-btn[b-a4jfm646ag] { width: 36px; height: 36px; font-size: .95rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT PANEL — Section paiement premium
   Structure : totals · client · payment · cash · validate
═══════════════════════════════════════════════════════════════ */

/* Container principal — sous le panier ; occupe l’espace restant et défile si besoin */
.chk-panel[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-top: 2px solid var(--pos-border);
    background: var(--pos-white);
}

/* ── Totaux ──────────────────────────────────────────────────── */
.chk-totals[b-a4jfm646ag] {
    padding: .9rem 1.1rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    border-bottom: 1px solid var(--pos-border);
}

.chk-total-row[b-a4jfm646ag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
}

.chk-row-label[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--pos-sub);
}
.chk-row-label i[b-a4jfm646ag] { font-size: .75rem; color: var(--pos-muted); }

.chk-row-val[b-a4jfm646ag] {
    font-weight: 600;
    color: var(--pos-text2);
}
.chk-row-val em[b-a4jfm646ag] { font-style: normal; font-size: .68rem; color: var(--pos-muted); margin-left: 2px; }

/* Discount row */
.chk-total-row.discount[b-a4jfm646ag] { align-items: flex-start; flex-wrap: wrap; gap: .35rem; }

.chk-disc-group[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chk-disc-field[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    border-radius: var(--r8);
    overflow: hidden;
    transition: border-color var(--tr);
}
.chk-disc-field:focus-within[b-a4jfm646ag] { border-color: var(--pos-accent); }

.chk-disc-input[b-a4jfm646ag] {
    width: 52px;
    background: transparent;
    border: none;
    color: var(--pos-text);
    font-size: .78rem;
    font-weight: 600;
    padding: .28rem .4rem;
    outline: none;
    text-align: center;
}

.chk-disc-unit[b-a4jfm646ag] {
    font-size: .68rem;
    font-weight: 700;
    color: var(--pos-muted);
    padding: 0 .35rem;
    border-left: 1px solid var(--pos-border);
    background: var(--pos-bg);
}

.chk-disc-or[b-a4jfm646ag] { font-size: .68rem; color: var(--pos-muted); }

.chk-disc-badge[b-a4jfm646ag] {
    font-size: .68rem;
    font-weight: 800;
    padding: .18rem .5rem;
    border-radius: var(--r6);
    background: rgba(239,68,68,.08);
    color: var(--pos-red);
    border: 1px solid rgba(239,68,68,.2);
}

/* ── Packs & promos (caisse) ─────────────────────────────────── */
.chk-pack-wrap[b-a4jfm646ag] {
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--pos-border);
}

.chk-pack-toggle[b-a4jfm646ag] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    padding: .45rem .55rem;
    border-radius: var(--r10);
    border: 1px solid var(--pos-border);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--tr), background var(--tr);
}
.chk-pack-toggle:hover[b-a4jfm646ag] { border-color: var(--pos-accent); background: rgba(249,115,22,.06); }
.chk-pack-toggle.open[b-a4jfm646ag] { border-color: rgba(249,115,22,.45); }
.chk-pack-toggle .bi-gift-fill[b-a4jfm646ag] { color: var(--pos-accent); font-size: .9rem; }
.chk-pack-toggle-meta[b-a4jfm646ag] {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 600;
    color: var(--pos-muted);
}
.chk-pack-chevron[b-a4jfm646ag] {
    font-size: .7rem;
    color: var(--pos-muted);
    transition: transform .2s ease;
}
.chk-pack-toggle.open .chk-pack-chevron[b-a4jfm646ag] { transform: rotate(180deg); }

.chk-pack-panel[b-a4jfm646ag] {
    margin-top: .55rem;
    padding: .55rem .45rem .35rem;
    border-radius: var(--r10);
    background: var(--pos-bg);
    border: 1px solid var(--pos-border);
}

.chk-pack-intro[b-a4jfm646ag] {
    margin: 0 0 .5rem;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--pos-muted);
}

.chk-pack-client-hint[b-a4jfm646ag] {
    margin: 0 0 .55rem;
    padding: .45rem .5rem;
    font-size: .66rem;
    line-height: 1.4;
    color: #fdba74;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.28);
    border-radius: var(--r8);
}

.chk-pack-chips[b-a4jfm646ag] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .45rem;
}

.chk-pack-chip[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .38rem .55rem;
    border-radius: var(--r8);
    border: 1px solid var(--pos-border);
    background: var(--pos-white);
    cursor: pointer;
    text-align: left;
    max-width: 100%;
    transition: border-color var(--tr), box-shadow var(--tr);
}
.chk-pack-chip:hover:not(:disabled)[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 1px rgba(249,115,22,.15);
}
.chk-pack-chip:disabled[b-a4jfm646ag] { opacity: .45; cursor: not-allowed; }
.chk-pack-chip--match[b-a4jfm646ag] {
    border-color: rgba(16,185,129,.5);
    background: rgba(16,185,129,.06);
}

.chk-pack-chip-name[b-a4jfm646ag] {
    font-size: .72rem;
    font-weight: 800;
    color: var(--pos-text2);
}
.chk-pack-chip-meta[b-a4jfm646ag] {
    font-size: .62rem;
    color: var(--pos-muted);
    font-weight: 600;
}

.chk-pack-clear[b-a4jfm646ag] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .5rem;
    padding: .25rem .5rem;
    font-size: .65rem;
    font-weight: 700;
    color: var(--pos-red);
    background: transparent;
    border: 1px dashed rgba(239,68,68,.35);
    border-radius: var(--r6);
    cursor: pointer;
}
.chk-pack-clear:hover[b-a4jfm646ag] { background: rgba(239,68,68,.06); }

.chk-pack-create[b-a4jfm646ag] {
    padding-top: .35rem;
    margin-top: .2rem;
    border-top: 1px solid var(--pos-border);
}

.chk-pack-form-grid[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: .35rem 0 .45rem;
}

.chk-pack-form-row[b-a4jfm646ag] {
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    align-items: center;
    gap: .35rem;
}

.chk-pack-lbl[b-a4jfm646ag] {
    font-size: .62rem;
    font-weight: 700;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.chk-pack-input[b-a4jfm646ag] {
    width: 100%;
    box-sizing: border-box;
    padding: .32rem .45rem;
    border-radius: var(--r8);
    border: 1px solid var(--pos-border);
    background: var(--pos-white);
    color: var(--pos-text);
    font-size: .78rem;
    font-weight: 600;
}
.chk-pack-input:focus[b-a4jfm646ag] { outline: none; border-color: var(--pos-accent); }
.chk-pack-input-num[b-a4jfm646ag] { text-align: right; }

.chk-pack-save[b-a4jfm646ag] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .42rem .6rem;
    border: none;
    border-radius: var(--r8);
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
}
.chk-pack-save:hover[b-a4jfm646ag] { filter: brightness(1.05); }

.chk-pack-list[b-a4jfm646ag] {
    margin-top: .55rem;
    padding-top: .45rem;
    border-top: 1px solid var(--pos-border);
}

.chk-pack-row[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .25rem;
    border-bottom: 1px solid var(--pos-border);
    font-size: .72rem;
}
.chk-pack-row:last-child[b-a4jfm646ag] { border-bottom: none; }
.chk-pack-row--off[b-a4jfm646ag] { opacity: .5; }

.chk-pack-row-main[b-a4jfm646ag] { min-width: 0; }
.chk-pack-row-name[b-a4jfm646ag] { font-weight: 800; color: var(--pos-text2); display: block; }
.chk-pack-row-meta[b-a4jfm646ag] { font-size: .62rem; color: var(--pos-muted); }

.chk-pack-row-actions[b-a4jfm646ag] { display: flex; gap: .25rem; flex-shrink: 0; }

.chk-pack-icon-btn[b-a4jfm646ag] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r6);
    border: 1px solid var(--pos-border);
    background: var(--pos-white);
    color: var(--pos-sub);
    cursor: pointer;
    font-size: .72rem;
}
.chk-pack-icon-btn:hover[b-a4jfm646ag] { border-color: var(--pos-accent); color: var(--pos-accent); }
.chk-pack-icon-btn.danger:hover[b-a4jfm646ag] { border-color: #ef4444; color: #ef4444; }

/* Total TTC – bloc principal */
.chk-total-ttc[b-a4jfm646ag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem .9rem;
    margin: .1rem 0 0;
    background: linear-gradient(
        135deg,
        var(--ds-bg-elevated) 0%,
        color-mix(in srgb, var(--ds-accent) 14%, var(--ds-bg-surface)) 100%
    );
    border: 1.5px solid var(--ds-accent-dim);
    border-radius: var(--r12);
}

.chk-ttc-label[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 800;
    color: var(--pos-sub);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.chk-ttc-label i[b-a4jfm646ag] { color: var(--pos-accent); font-size: .85rem; }

.chk-ttc-amount[b-a4jfm646ag] {
    display: flex;
    align-items: baseline;
    gap: .3rem;
}

.chk-ttc-num[b-a4jfm646ag] {
    font-size: 1.55rem;
    font-weight: 900;
    color: var(--pos-text);
    letter-spacing: -.02em;
    line-height: 1;
}

.chk-ttc-cur[b-a4jfm646ag] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--pos-accent);
}

/* ── Client ──────────────────────────────────────────────────── */
.chk-client[b-a4jfm646ag] {
    border-bottom: 1px solid var(--pos-border);
}

.chk-client-toggle[b-a4jfm646ag] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--tr);
}
.chk-client-toggle:hover[b-a4jfm646ag] { background: var(--pos-surface); }

.chk-client-avatar[b-a4jfm646ag] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--pos-muted);
    flex-shrink: 0;
    transition: all var(--tr);
    font-weight: 700;
}
.chk-client-avatar.named[b-a4jfm646ag] {
    background: var(--pos-accent-lt);
    border-color: rgba(255,106,0,.3);
    color: var(--pos-accent);
    font-size: .9rem;
    text-transform: uppercase;
}

.chk-client-info[b-a4jfm646ag] {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.chk-client-name[b-a4jfm646ag] {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--pos-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chk-client-phone[b-a4jfm646ag] {
    display: block;
    font-size: .68rem;
    color: var(--pos-muted);
}
.chk-client-empty[b-a4jfm646ag] {
    font-size: .8rem;
    color: var(--pos-muted);
    font-style: italic;
}

.chk-client-arrow[b-a4jfm646ag] {
    color: var(--pos-muted);
    font-size: .8rem;
    flex-shrink: 0;
    transition: color var(--tr);
}
.chk-client-toggle:hover .chk-client-arrow[b-a4jfm646ag] { color: var(--pos-accent); }

.chk-client-form[b-a4jfm646ag] {
    padding: .3rem 1.1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    animation: slideDown-b-a4jfm646ag .18s ease;
}

.chk-client-promo-rule[b-a4jfm646ag] {
    margin: 0;
    padding: .4rem .55rem;
    font-size: .72rem;
    line-height: 1.35;
    color: var(--pos-muted);
    background: rgba(249, 115, 22, .08);
    border: 1px solid rgba(249, 115, 22, .22);
    border-radius: var(--r8);
}
.chk-client-promo-rule i[b-a4jfm646ag] {
    color: var(--pos-accent);
    margin-right: .28rem;
}

.chk-field-wrap[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    border-radius: var(--r10);
    padding: .08rem .75rem;
    transition: border-color var(--tr), box-shadow var(--tr);
}
.chk-field-wrap:focus-within[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 3px var(--pos-accent-lt);
}
.chk-field-wrap i[b-a4jfm646ag] { color: var(--pos-muted); font-size: .82rem; flex-shrink: 0; }

.chk-input[b-a4jfm646ag] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--pos-text);
    font-size: .84rem;
    padding: .58rem 0;
    outline: none;
}
.chk-input[b-a4jfm646ag]::placeholder { color: var(--pos-muted); }

/* ── Payment methods ─────────────────────────────────────────── */
.chk-payment[b-a4jfm646ag] {
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--pos-border);
}

.chk-section-label[b-a4jfm646ag] {
    font-size: .6rem;
    font-weight: 800;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .55rem;
}

.chk-pay-grid[b-a4jfm646ag] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
}

.chk-pay-btn[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .65rem .3rem;
    border-radius: var(--r12);
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
.chk-pay-btn[b-a4jfm646ag]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,106,0,.04));
    opacity: 0;
    transition: opacity .2s;
}
.chk-pay-btn:hover[b-a4jfm646ag] { border-color: rgba(255,106,0,.35); }
.chk-pay-btn:hover[b-a4jfm646ag]::before { opacity: 1; }

.chk-pay-btn.active[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    background: linear-gradient(135deg, rgba(255,106,0,.08), rgba(255,106,0,.04));
    box-shadow: 0 2px 12px rgba(255,106,0,.15);
}

.chk-pay-ico[b-a4jfm646ag] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--pos-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--pos-sub);
    transition: all .2s;
    border: 1px solid var(--pos-border);
}
.chk-pay-btn.active .chk-pay-ico[b-a4jfm646ag] {
    background: var(--pos-accent);
    color: #fff;
    border-color: var(--pos-accent);
    box-shadow: 0 3px 10px var(--pos-accent-glow);
}

.chk-pay-text[b-a4jfm646ag] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.chk-pay-name[b-a4jfm646ag] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--pos-text2);
    transition: color .2s;
}
.chk-pay-btn.active .chk-pay-name[b-a4jfm646ag] { color: var(--pos-accent); }

.chk-pay-desc[b-a4jfm646ag] {
    font-size: .6rem;
    color: var(--pos-muted);
}

.chk-pay-check[b-a4jfm646ag] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pos-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 800;
    animation: popIn-b-a4jfm646ag .2s cubic-bezier(.34,1.56,.64,1);
}

/* ── Cash section ────────────────────────────────────────────── */
.chk-cash[b-a4jfm646ag] {
    padding: .65rem 1.1rem .6rem;
    border-bottom: 1px solid var(--pos-border);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    animation: slideDown-b-a4jfm646ag .18s ease;
}

.chk-cash-input-wrap[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    background: var(--pos-surface);
    border: 2px solid var(--pos-border);
    border-radius: var(--r12);
    overflow: hidden;
    transition: border-color var(--tr), box-shadow var(--tr);
}
.chk-cash-input-wrap:focus-within[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    box-shadow: 0 0 0 3px var(--pos-accent-lt);
}

.chk-cash-currency[b-a4jfm646ag] {
    padding: 0 .75rem;
    font-size: .75rem;
    font-weight: 800;
    color: var(--pos-accent);
    background: rgba(255,106,0,.06);
    border-right: 1px solid var(--pos-border);
    align-self: stretch;
    display: flex;
    align-items: center;
    letter-spacing: .05em;
}

.chk-cash-input[b-a4jfm646ag] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--pos-text);
    font-size: 1.35rem;
    font-weight: 800;
    padding: .65rem .8rem;
    outline: none;
    text-align: center;
    letter-spacing: -.01em;
}
.chk-cash-input[b-a4jfm646ag]::placeholder { color: var(--pos-muted); font-weight: 400; font-size: .9rem; }

.chk-cash-reset[b-a4jfm646ag] {
    background: none;
    border: none;
    color: var(--pos-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 .75rem;
    display: flex;
    align-items: center;
    transition: color var(--tr);
}
.chk-cash-reset:hover[b-a4jfm646ag] { color: var(--pos-red); }

/* Change / Manque banner */
.chk-change[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-radius: var(--r10);
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.2);
    animation: slideDown-b-a4jfm646ag .15s ease;
}
.chk-change.insufficient[b-a4jfm646ag] {
    background: rgba(239,68,68,.06);
    border-color: rgba(239,68,68,.2);
}

.chk-change-label[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--pos-green);
}
.chk-change.insufficient .chk-change-label[b-a4jfm646ag] { color: var(--pos-red); }

.chk-change-amount[b-a4jfm646ag] {
    font-size: .9rem;
    font-weight: 900;
    color: var(--pos-green);
}
.chk-change.insufficient .chk-change-amount[b-a4jfm646ag] { color: var(--pos-red); }

/* Quick amounts */
.chk-quick-row[b-a4jfm646ag] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .35rem;
}

.chk-quick[b-a4jfm646ag] {
    padding: .42rem .2rem;
    text-align: center;
    background: var(--pos-surface);
    border: 1.5px solid var(--pos-border);
    color: var(--pos-text2);
    font-size: .75rem;
    font-weight: 700;
    border-radius: var(--r8);
    cursor: pointer;
    transition: all .15s ease;
    position: relative;
    overflow: hidden;
}
.chk-quick:hover[b-a4jfm646ag] {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
    background: var(--pos-accent-lt);
    transform: translateY(-1px);
}
.chk-quick.sel[b-a4jfm646ag] {
    background: var(--pos-accent);
    color: #fff;
    border-color: var(--pos-accent);
    box-shadow: 0 3px 10px var(--pos-accent-glow);
    transform: translateY(-1px);
}
.chk-quick-exact[b-a4jfm646ag] {
    background: rgba(255,106,0,.06);
    border-color: rgba(255,106,0,.25);
    color: var(--pos-accent);
    font-size: .68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
}
.chk-quick-exact i[b-a4jfm646ag] { font-size: .65rem; }
.chk-quick-exact.sel[b-a4jfm646ag] {
    background: var(--pos-accent);
    color: #fff;
    border-color: var(--pos-accent);
}

/* ── Footer / Validate ───────────────────────────────────────── */
.chk-footer[b-a4jfm646ag] {
    padding: .8rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Feedback */
.chk-feedback[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .85rem;
    border-radius: var(--r8);
    font-size: .76rem;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    animation: slideDown-b-a4jfm646ag .18s ease;
}
.chk-feedback.ok[b-a4jfm646ag]   { background: var(--pos-green-lt); color: var(--pos-green); border: 1px solid rgba(16,185,129,.2); }
.chk-feedback.info[b-a4jfm646ag] { background: rgba(249,115,22,.08); color: var(--pos-blue);  border: 1px solid rgba(249,115,22,.2); }
.chk-feedback.rp[b-a4jfm646ag]   { background: var(--pos-accent-lt); color: var(--pos-accent); border: 1px solid rgba(255,106,0,.2); }

/* Validate button */
.chk-validate[b-a4jfm646ag] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.4rem;
    border: none;
    border-radius: var(--r12);
    cursor: pointer;
    transition: all .2s ease;
    font-weight: 800;
    letter-spacing: .01em;
    position: relative;
    overflow: hidden;
}
.chk-validate[b-a4jfm646ag]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
    pointer-events: none;
}

.chk-validate.ready[b-a4jfm646ag] {
    background: linear-gradient(135deg, #FF6A00 0%, #FF8C35 100%);
    color: #fff;
    box-shadow:
        0 4px 20px rgba(255,106,0,.4),
        0 1px 0 rgba(255,255,255,.2) inset;
    animation: readyPulse-b-a4jfm646ag 2.5s ease-in-out infinite;
}
.chk-validate.ready:hover[b-a4jfm646ag] {
    background: linear-gradient(135deg, #e85f00 0%, #ff7d1a 100%);
    box-shadow:
        0 8px 32px rgba(255,106,0,.55),
        0 0 0 3px rgba(255,106,0,.15),
        0 1px 0 rgba(255,255,255,.2) inset;
    transform: translateY(-2px);
    animation: none;
}
.chk-validate.ready:active[b-a4jfm646ag] {
    transform: translateY(0);
    box-shadow: 0 3px 12px rgba(255,106,0,.4);
}
.chk-validate.disabled[b-a4jfm646ag] {
    background: var(--pos-border);
    color: var(--pos-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.chk-validate-left[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
}
.chk-validate-left i[b-a4jfm646ag] { font-size: 1.25rem; }

.chk-validate-amount[b-a4jfm646ag] {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -.01em;
    opacity: .95;
    background: rgba(255,255,255,.2);
    padding: .3rem .75rem;
    border-radius: var(--r6);
    backdrop-filter: blur(4px);
}
.chk-validate.disabled .chk-validate-amount[b-a4jfm646ag] { background: rgba(0,0,0,.06); }

/* ── Animations checkout ─────────────────────────────────────── */
@keyframes slideDown-b-a4jfm646ag {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes popIn-b-a4jfm646ag {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes readyPulse-b-a4jfm646ag {
    0%, 100% { box-shadow: 0 4px 20px rgba(255,106,0,.4); }
    50%       { box-shadow: 0 4px 28px rgba(255,106,0,.62); }
}

/* Checkout responsive */
@media (max-width: 900px) {
    .chk-pay-grid[b-a4jfm646ag] { grid-template-columns: repeat(3, 1fr); }
    .chk-quick-row[b-a4jfm646ag] { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 640px) {
    .chk-ttc-num[b-a4jfm646ag] { font-size: 1.3rem; }
    .chk-validate[b-a4jfm646ag] { padding: .85rem 1rem; }
    .chk-validate-left[b-a4jfm646ag] { font-size: .82rem; }
}

/* ── Client lookup (phone auto-fill) ────────────────────────────── */
.chk-client-lookup[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .8rem;
    border: 1px solid transparent;
    animation: slideDown-b-a4jfm646ag .15s ease;
}
.chk-client-lookup strong[b-a4jfm646ag] { font-weight: 700; }

.chk-lookup-bon[b-a4jfm646ag] {
    background: rgba(0,196,154,.12);
    border-color: rgba(0,196,154,.35);
    color: #00c49a;
}
.chk-lookup-risque[b-a4jfm646ag] {
    background: rgba(240,180,41,.12);
    border-color: rgba(240,180,41,.35);
    color: #f0b429;
}
.chk-lookup-blacklist[b-a4jfm646ag] {
    background: rgba(248,113,113,.12);
    border-color: rgba(248,113,113,.35);
    color: #f87171;
}

.chk-lookup-badge[b-a4jfm646ag] {
    padding: .15rem .5rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .03em;
    background: rgba(255,255,255,.08);
}
.chk-lookup-stats[b-a4jfm646ag] {
    opacity: .75;
    font-size: .75rem;
    margin-left: auto;
}

/* ── Blacklist warning ──────────────────────────────────────────── */
.chk-blacklist-warn[b-a4jfm646ag] {
    display: flex;
    align-items: center;
    margin-top: .5rem;
    padding: .55rem .85rem;
    background: rgba(248,113,113,.15);
    border: 1px solid rgba(248,113,113,.45);
    border-radius: 8px;
    color: #f87171;
    font-size: .82rem;
    font-weight: 600;
    animation: slideDown-b-a4jfm646ag .15s ease;
}
/* /Pages/Charges.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Charges — Expense Tracking Module
   ═══════════════════════════════════════════════════════════════ */

.ch-page[b-sbv88uifev] {
    padding: 1.5rem;
    max-width: 1300px;
    margin: 0 auto;
    color: var(--ds-text);
}

/* ── Header ─────────────────────────────────────────────────── */
.ch-header[b-sbv88uifev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.ch-header-left[b-sbv88uifev] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ch-header-icon[b-sbv88uifev] {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    box-shadow: 0 4px 16px rgba(239, 68, 68, .35);
    flex-shrink: 0;
}

.ch-title[b-sbv88uifev] {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    color: var(--ds-text);
}

.ch-subtitle[b-sbv88uifev] {
    font-size: .83rem;
    color: var(--ds-text-muted);
    margin: 0;
}

.ch-header-right[b-sbv88uifev] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ── Month navigator ─────────────────────────────────────────── */
.ch-month-nav[b-sbv88uifev] {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    padding: .35rem .6rem;
}

.ch-nav-btn[b-sbv88uifev] {
    background: transparent;
    border: none;
    color: var(--ds-text-muted);
    cursor: pointer;
    padding: .2rem .45rem;
    border-radius: 6px;
    font-size: .85rem;
    transition: background .15s, color .15s;
}
.ch-nav-btn:hover:not(:disabled)[b-sbv88uifev] { background: var(--ds-bg-elevated); color: var(--ds-text); }
.ch-nav-btn:disabled[b-sbv88uifev] { opacity: .35; cursor: not-allowed; }

.ch-month-label[b-sbv88uifev] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ds-text);
    min-width: 120px;
    text-align: center;
    text-transform: capitalize;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.ch-btn[b-sbv88uifev] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: 9px;
    font-size: .875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
}
.ch-btn.sm[b-sbv88uifev] { padding: .4rem .85rem; font-size: .82rem; }
.ch-btn-primary[b-sbv88uifev] { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 2px 8px rgba(239,68,68,.3); }
.ch-btn-primary:hover[b-sbv88uifev] { filter: brightness(1.1); transform: translateY(-1px); }
.ch-btn-ghost[b-sbv88uifev] { background: transparent; color: var(--ds-text-muted); border: 1px solid var(--ds-border); }
.ch-btn-ghost:hover[b-sbv88uifev] { background: var(--ds-bg-elevated); color: var(--ds-text); }
.ch-btn-danger[b-sbv88uifev] { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.ch-btn-danger:hover[b-sbv88uifev] { background: rgba(239,68,68,.28); }

/* ── KPI Row ─────────────────────────────────────────────────── */
.ch-kpi-row[b-sbv88uifev] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ch-kpi[b-sbv88uifev] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    transition: transform .18s, box-shadow .18s;
}
.ch-kpi:hover[b-sbv88uifev] { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }

.ch-kpi-main[b-sbv88uifev] { border-left: 3px solid #ef4444; }

.ch-kpi-icon[b-sbv88uifev] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(239, 68, 68, .15);
    color: #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ch-kpi-icon.orange[b-sbv88uifev]  { background: rgba(249,115,22,.15); color: #fb923c; }
.ch-kpi-icon.purple[b-sbv88uifev]  { background: rgba(139,92,246,.15); color: #a78bfa; }
.ch-kpi-icon.teal[b-sbv88uifev]    { background: rgba(6,182,212,.15);  color: #22d3ee; }

.ch-kpi-body[b-sbv88uifev] { flex: 1; min-width: 0; }
.ch-kpi-label[b-sbv88uifev] { font-size: .75rem; font-weight: 600; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.ch-kpi-value[b-sbv88uifev] { font-size: 1.35rem; font-weight: 800; color: var(--ds-text); line-height: 1.15; }
.ch-kpi-value.sm[b-sbv88uifev] { font-size: 1.1rem; }
.ch-kpi-unit[b-sbv88uifev] { font-size: .72rem; font-weight: 500; color: var(--ds-text-muted); }
.ch-kpi-sub[b-sbv88uifev] { font-size: .75rem; color: var(--ds-text-muted); margin-top: .2rem; }

/* ── Main grid ───────────────────────────────────────────────── */
.ch-main[b-sbv88uifev] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.25rem;
    align-items: start;
}

/* ── Cards ───────────────────────────────────────────────────── */
.ch-breakdown-card[b-sbv88uifev],
.ch-list-card[b-sbv88uifev] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
}

.ch-card-title[b-sbv88uifev] {
    font-size: .875rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ── Breakdown ───────────────────────────────────────────────── */
.ch-breakdown-card[b-sbv88uifev] { padding: 1.1rem 1.2rem; }

.ch-breakdown-list[b-sbv88uifev] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 1rem;
}

.ch-breakdown-row[b-sbv88uifev] { display: flex; flex-direction: column; gap: .25rem; }

.ch-breakdown-meta[b-sbv88uifev] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
}

.ch-type-dot[b-sbv88uifev] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ch-breakdown-name[b-sbv88uifev] { flex: 1; font-weight: 500; color: var(--ds-text-secondary, #cbd5e1); }
.ch-breakdown-cnt[b-sbv88uifev]  { font-size: .72rem; color: var(--ds-text-muted); }

.ch-breakdown-bar-wrap[b-sbv88uifev] {
    height: 5px;
    background: var(--ds-bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}

.ch-breakdown-bar[b-sbv88uifev] {
    height: 100%;
    border-radius: 3px;
    transition: width .5s ease;
    min-width: 2px;
}

.ch-breakdown-amount[b-sbv88uifev] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ds-text);
    text-align: right;
}

/* ── Trend sparkline ─────────────────────────────────────────── */
.ch-trend-section[b-sbv88uifev] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ds-border);
}

.ch-trend-title[b-sbv88uifev] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}

.ch-trend-bars[b-sbv88uifev] {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    height: 60px;
}

.ch-trend-col[b-sbv88uifev] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    height: 100%;
}

.ch-trend-bar-wrap[b-sbv88uifev] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: var(--ds-bg-elevated);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.ch-trend-bar[b-sbv88uifev] {
    width: 100%;
    background: rgba(239, 68, 68, .4);
    border-radius: 4px 4px 0 0;
    min-height: 3px;
    transition: height .5s ease;
}

.ch-trend-col.current .ch-trend-bar[b-sbv88uifev] { background: #ef4444; }

.ch-trend-label[b-sbv88uifev] {
    font-size: .65rem;
    color: var(--ds-text-muted);
    text-transform: capitalize;
}
.ch-trend-col.current .ch-trend-label[b-sbv88uifev] { color: #f87171; font-weight: 700; }

/* ── Empty breakdown ─────────────────────────────────────────── */
.ch-empty-breakdown[b-sbv88uifev] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    gap: .6rem;
    color: var(--ds-text-muted);
    font-size: .875rem;
}
.ch-empty-breakdown i[b-sbv88uifev] { font-size: 2rem; opacity: .25; }

/* ── List card ───────────────────────────────────────────────── */
.ch-list-header[b-sbv88uifev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--ds-border);
    gap: .75rem;
    flex-wrap: wrap;
}

.ch-filter-select[b-sbv88uifev] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    color: var(--ds-text);
    font-size: .8rem;
    padding: .35rem .65rem;
    cursor: pointer;
    outline: none;
}
.ch-filter-select option[b-sbv88uifev] { background: var(--ds-bg-app); }
.ch-filter-select:focus[b-sbv88uifev] { border-color: #6366f1; }

/* ── Table ───────────────────────────────────────────────────── */
.ch-table-wrap[b-sbv88uifev] { overflow-x: auto; }

.ch-table[b-sbv88uifev] {
    width: 100%;
    border-collapse: collapse;
}

.ch-table th[b-sbv88uifev] {
    padding: .6rem 1rem;
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ds-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--ds-border);
    white-space: nowrap;
}
.ch-th-right[b-sbv88uifev] { text-align: right !important; }

.ch-row[b-sbv88uifev] { transition: background .14s; }
.ch-row:hover[b-sbv88uifev] { background: var(--ds-bg-elevated); }

.ch-table td[b-sbv88uifev] {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--ds-border-subtle);
    font-size: .85rem;
    vertical-align: middle;
}
.ch-row:last-child td[b-sbv88uifev] { border-bottom: none; }

.ch-td-date[b-sbv88uifev] {
    color: var(--ds-text-muted);
    white-space: nowrap;
    font-size: .8rem;
}

.ch-type-badge[b-sbv88uifev] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ch-td-label[b-sbv88uifev] { max-width: 240px; }
.ch-label-text[b-sbv88uifev] { font-weight: 500; color: var(--ds-text); }
.ch-label-note[b-sbv88uifev] { font-size: .74rem; color: var(--ds-text-muted); margin-top: .1rem; }

.ch-td-amount[b-sbv88uifev] {
    text-align: right;
    font-weight: 700;
    color: var(--ds-text);
    white-space: nowrap;
}
.ch-mad[b-sbv88uifev] { font-size: .72rem; color: var(--ds-text-muted); font-weight: 400; }

.ch-td-actions[b-sbv88uifev] {
    text-align: right;
    white-space: nowrap;
}

.ch-action-btn[b-sbv88uifev] {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: .3rem .45rem;
    border-radius: 6px;
    font-size: .85rem;
    transition: background .15s, color .15s;
    color: var(--ds-text-muted);
    opacity: 0;
}
.ch-row:hover .ch-action-btn[b-sbv88uifev] { opacity: 1; }
.ch-action-btn.edit:hover[b-sbv88uifev] { background: rgba(99,102,241,.15); color: #a5b4fc; }
.ch-action-btn.del:hover[b-sbv88uifev]  { background: rgba(239,68,68,.15);  color: #f87171; }

/* ── Empty list ──────────────────────────────────────────────── */
.ch-empty-list[b-sbv88uifev] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 3rem 1.5rem;
    color: var(--ds-text-muted);
    font-size: .875rem;
    text-align: center;
}
.ch-empty-list i[b-sbv88uifev] { font-size: 2.5rem; opacity: .2; }
.ch-empty-list p[b-sbv88uifev] { margin: 0; }

/* ══════════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════════ */
.ch-overlay[b-sbv88uifev] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 300;
    backdrop-filter: blur(2px);
    animation: fade-in-b-sbv88uifev .15s ease;
}

@keyframes fade-in-b-sbv88uifev { from { opacity: 0; } to { opacity: 1; } }

.ch-modal[b-sbv88uifev] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(540px, calc(100vw - 2rem));
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    z-index: 301;
    overflow: hidden;
    animation: modal-in-b-sbv88uifev .2s cubic-bezier(.22, 1, .36, 1);
}
.ch-modal.ch-modal-sm[b-sbv88uifev] { width: min(420px, calc(100vw - 2rem)); }

@keyframes modal-in-b-sbv88uifev {
    from { opacity: 0; transform: translate(-50%, calc(-50% - 16px)) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ch-modal-header[b-sbv88uifev] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--ds-border);
}
.ch-modal-header h2[b-sbv88uifev] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ch-modal-close[b-sbv88uifev] {
    background: transparent;
    border: none;
    color: var(--ds-text-muted);
    cursor: pointer;
    padding: .3rem;
    border-radius: 6px;
    font-size: .9rem;
    transition: background .15s, color .15s;
}
.ch-modal-close:hover[b-sbv88uifev] { background: var(--ds-bg-elevated); color: var(--ds-text); }

.ch-modal-body[b-sbv88uifev] { padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; max-height: 70vh; overflow-y: auto; }

.ch-modal-footer[b-sbv88uifev] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg-elevated);
}

/* ── Form fields ─────────────────────────────────────────────── */
.ch-field[b-sbv88uifev] { display: flex; flex-direction: column; gap: .35rem; }

.ch-field label[b-sbv88uifev] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ch-req[b-sbv88uifev]  { color: #f87171; }
.ch-opt[b-sbv88uifev]  { color: var(--ds-text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .75rem; }

.ch-field-row[b-sbv88uifev] { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.ch-input[b-sbv88uifev] {
    width: 100%;
    padding: .6rem .85rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    color: var(--ds-text);
    font-size: .88rem;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.ch-input:focus[b-sbv88uifev] { outline: none; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.ch-textarea[b-sbv88uifev] { resize: vertical; min-height: 60px; font-family: inherit; }

.ch-input-group[b-sbv88uifev] { position: relative; }
.ch-input-group .ch-input[b-sbv88uifev] { padding-right: 2.8rem; }
.ch-input-suffix[b-sbv88uifev] {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    pointer-events: none;
}

/* ── Type grid picker ────────────────────────────────────────── */
.ch-type-grid[b-sbv88uifev] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .4rem;
}

.ch-type-btn[b-sbv88uifev] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .6rem .3rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    color: var(--ds-text-muted);
    font-size: .68rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
}
.ch-type-btn i[b-sbv88uifev] { font-size: .95rem; }
.ch-type-btn:hover[b-sbv88uifev] {
    background: rgba(var(--type-color), .1);
    border-color: var(--type-color, rgba(255,255,255,.2));
    color: var(--ds-text);
}
.ch-type-btn.selected[b-sbv88uifev] {
    background: rgba(239,68,68,.15);
    border-color: var(--type-color, #ef4444);
    color: var(--type-color, #f87171);
    font-weight: 700;
}

/* ── Form error ──────────────────────────────────────────────── */
.ch-form-error[b-sbv88uifev] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .85rem;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 8px;
    font-size: .83rem;
    color: #fca5a5;
}

/* ── Confirm modal ───────────────────────────────────────────── */
.ch-confirm-text[b-sbv88uifev] { font-size: .95rem; color: var(--ds-text); margin: 0 0 .35rem; }
.ch-confirm-sub[b-sbv88uifev]  { font-size: .8rem; color: var(--ds-text-muted); margin: 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ch-main[b-sbv88uifev] { grid-template-columns: 1fr; }
    .ch-breakdown-card[b-sbv88uifev] { order: 2; }
    .ch-list-card[b-sbv88uifev] { order: 1; }
}

@media (max-width: 640px) {
    .ch-page[b-sbv88uifev] { padding: 1rem; }
    .ch-kpi-row[b-sbv88uifev] { grid-template-columns: 1fr 1fr; }
    .ch-type-grid[b-sbv88uifev] { grid-template-columns: repeat(4, 1fr); }
    .ch-field-row[b-sbv88uifev] { grid-template-columns: 1fr; }
    .ch-header[b-sbv88uifev] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/ComptesUtilisateurs.razor.rz.scp.css */
/* ═══ Gabarit aligné sur Pages/Permissions (perm-*) + tableau comptes CRM ═══ */

.perm-shell[b-ezulflvo92] {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
    font-family: var(--ds-font-sans, "Inter", system-ui, sans-serif);
    color: var(--ds-text, #fefdfb);
}

.perm-shell--wide[b-ezulflvo92] {
    max-width: 1100px;
}

.perm-head[b-ezulflvo92] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.perm-title[b-ezulflvo92] {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.35rem;
    color: var(--ds-text, #fefdfb);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.perm-title-icon[b-ezulflvo92] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ds-accent, #f97316), var(--ds-accent-active, #ea580c));
    color: var(--ds-text-inverse, #fff);
    font-size: 1.2rem;
    box-shadow: var(--ds-glow-sm, 0 0 20px rgba(249, 115, 22, 0.22));
}

.perm-lead[b-ezulflvo92] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ds-text-muted, #9c948a);
    max-width: 56ch;
}

.perm-code[b-ezulflvo92] {
    font-size: 0.85em;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    background: var(--ds-accent-dim, rgba(249, 115, 22, 0.12));
    border: 1px solid var(--ds-border, #3d342c);
    color: var(--ds-accent, #f97316);
}

.perm-link[b-ezulflvo92] {
    color: var(--ds-accent, #f97316);
    font-weight: 700;
    text-decoration: none;
}
.perm-link:hover[b-ezulflvo92] {
    text-decoration: underline;
}

.perm-head-actions[b-ezulflvo92] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.perm-btn-ghost[b-ezulflvo92] {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-elevated, #252119);
    color: var(--ds-text, #fefdfb);
    cursor: pointer;
}
.perm-btn-ghost:hover:not(:disabled)[b-ezulflvo92] {
    border-color: var(--ds-border-focus, #fb923c);
    filter: brightness(1.04);
}
.perm-btn-ghost:disabled[b-ezulflvo92] {
    opacity: 0.55;
    cursor: not-allowed;
}
.perm-btn-ghost .spinner-border[b-ezulflvo92] {
    border-color: rgba(100, 116, 139, 0.35);
    border-right-color: #f97316;
}

.perm-stats[b-ezulflvo92] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.perm-stat[b-ezulflvo92] {
    flex: 1;
    min-width: 120px;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: var(--ds-bg-elevated, #252119);
    border: 1px solid var(--ds-border, #3d342c);
    text-align: center;
}

.perm-stat--total[b-ezulflvo92] {
    border-color: var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
}

.perm-stat--ok[b-ezulflvo92] {
    border-color: var(--ds-success, #3fb950);
    background: var(--ds-success-dim, rgba(63, 185, 80, 0.12));
}

.perm-stat-val[b-ezulflvo92] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ds-text, #fefdfb);
}

.perm-stat-lbl[b-ezulflvo92] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted, #9c948a);
}

.perm-stat--ok .perm-stat-lbl[b-ezulflvo92] {
    color: var(--ds-success, #3fb950);
}

.perm-feedback[b-ezulflvo92] {
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

.perm-feedback--ok[b-ezulflvo92] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(74, 222, 128, 0.35);
    color: #bbf7d0;
}

.perm-no-result[b-ezulflvo92] {
    text-align: center;
    color: var(--ds-text-muted, #9c948a);
    padding: 2rem;
    font-size: 0.95rem;
}

/* Bloc tableau (équivalent visuel perm-pnav) */
.cu-table-panel[b-ezulflvo92] {
    margin: 0;
    padding: 0.5rem 0.35rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
}

.cu-table[b-ezulflvo92] {
    margin-bottom: 0;
    color: var(--ds-text, #fefdfb);
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-text, #fefdfb);
}

.cu-table thead th[b-ezulflvo92] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #fb923c;
    border-bottom: 1px solid var(--ds-border, #3d342c);
    background: rgba(249, 115, 22, 0.06);
}

.cu-table tbody td[b-ezulflvo92] {
    border-color: rgba(61, 52, 44, 0.65);
    vertical-align: middle;
    font-size: 0.86rem;
}

.cu-table tbody tr:hover[b-ezulflvo92] {
    background: rgba(255, 255, 255, 0.04);
}

.cu-table code[b-ezulflvo92] {
    font-size: 0.82rem;
    padding: 0.12rem 0.4rem;
    border-radius: 6px;
    background: var(--ds-accent-dim, rgba(249, 115, 22, 0.12));
    border: 1px solid var(--ds-border, #3d342c);
    color: var(--ds-accent, #f97316);
}

.cu-btn-delete[b-ezulflvo92] {
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.cu-btn-delete:hover:not(:disabled)[b-ezulflvo92] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(248, 113, 113, 0.65);
}
.cu-btn-delete:disabled[b-ezulflvo92] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* /Pages/CrmChat.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   CRM CHAT — Modern Messaging Platform
   Dark theme · 3-panel layout · Clean bubbles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell ───────────────────────────────────────────────────────── */
.chat-shell[b-nkdh8vvxwg] {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Topbar est déjà hors de .ds-main ; ~3.5rem ≈ padding vertical .ds-content autour du @Body */
    height: calc(100dvh - var(--ds-topbar-h, 60px) - 3.5rem);
    min-height: calc(100dvh - var(--ds-topbar-h, 60px) - 3.5rem);
    max-height: calc(100dvh - var(--ds-topbar-h, 60px) - 3.5rem);
    background: var(--ds-bg-app, var(--ds-bg-app));
    overflow: hidden;
    font-family: var(--ds-font-sans, system-ui, sans-serif);
    position: relative;
}

/* ── Temps réel SignalR (bannière) ─────────────────────────────── */
.chat-shell--realtime-banner[b-nkdh8vvxwg] {
    padding-top: 42px;
}

.crm-realtime-banner[b-nkdh8vvxwg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 12px;
    line-height: 1.35;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.crm-realtime-banner__text[b-nkdh8vvxwg] {
    flex: 1;
    min-width: 0;
}

.crm-realtime-banner--info[b-nkdh8vvxwg] {
    background: rgba(59, 130, 246, 0.22);
    color: var(--ds-text, #e8eaef);
}

.crm-realtime-banner--warn[b-nkdh8vvxwg] {
    background: rgba(234, 179, 8, 0.2);
    color: var(--ds-text, #e8eaef);
}

.crm-realtime-banner--bad[b-nkdh8vvxwg] {
    background: rgba(220, 53, 69, 0.22);
    color: var(--ds-text, #f8d7da);
}

.crm-realtime-banner .btn-outline-light[b-nkdh8vvxwg] {
    border-color: rgba(255, 255, 255, 0.35);
    color: inherit;
    font-size: 11px;
    padding: 0.15rem 0.5rem;
}

/* ── Shared icon button ──────────────────────────────────────────── */
.chat-icon-btn[b-nkdh8vvxwg] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ds-text-sub, var(--ds-text-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.chat-icon-btn:hover[b-nkdh8vvxwg]  { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); color: var(--ds-text, var(--ds-text)); }
.chat-icon-btn.active[b-nkdh8vvxwg] { background: var(--ds-accent-dim, rgba(249,115,22,.15)); color: var(--ds-accent, #f97316); }
.chat-icon-btn.chat-wa-btn[b-nkdh8vvxwg] { color: #25d366; }
.chat-icon-btn.chat-wa-btn:hover[b-nkdh8vvxwg] { background: rgba(37,211,102,.12); }

/* ── Dropdown ────────────────────────────────────────────────────── */
.chat-menu-wrap[b-nkdh8vvxwg] { position: relative; }
.chat-dropdown[b-nkdh8vvxwg] {
    position: absolute;
    top: calc(100% + 4px);
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 10px;
    padding: .35rem;
    z-index: 500;
    min-width: 190px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    animation: fadeDown-b-nkdh8vvxwg .12s ease;
}
.chat-dropdown-right[b-nkdh8vvxwg] { right: 0; }
.chat-dropdown-left[b-nkdh8vvxwg]  { right: 30px; }
.chat-dropdown-item[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .45rem .75rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: .82rem;
    color: var(--ds-text, var(--ds-text));
    cursor: pointer;
    text-align: left;
    transition: background .1s;
}
.chat-dropdown-item:hover[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); }
.chat-dropdown-item.danger[b-nkdh8vvxwg] { color: var(--ds-danger, #f85149); }
.chat-dropdown-item.danger:hover[b-nkdh8vvxwg] { background: var(--ds-danger-dim, rgba(248,81,73,.1)); }

.chat-overlay-close[b-nkdh8vvxwg] {
    position: fixed;
    inset: 0;
    z-index: 490;
}

/* ═══════════════════════════════════════════════════════════════════
   LEFT SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.chat-sidebar[b-nkdh8vvxwg] {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border-right: 1px solid var(--ds-border, var(--ds-border));
    overflow: hidden;
}
.chat-sidebar-backdrop[b-nkdh8vvxwg] {
    display: none;
}

/* Sidebar header */
.chat-sidebar-head[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--ds-border);
    flex-shrink: 0;
    gap: .5rem;
    flex-wrap: wrap;
}
.chat-sidebar-brand[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ds-text);
}
.chat-sidebar-brand-logo[b-nkdh8vvxwg] {
    height: 28px;
    width: auto;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Bouton présence Connecter / Déconnecter ── */
.chat-presence-toggle[b-nkdh8vvxwg] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    border: 1.5px solid;
    white-space: nowrap;
}
.chat-presence-toggle--on[b-nkdh8vvxwg] {
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.4);
    color: #22c55e;
}
.chat-presence-toggle--on:hover[b-nkdh8vvxwg] {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.4);
    color: #ef4444;
}
.chat-presence-toggle--off[b-nkdh8vvxwg] {
    background: rgba(100,116,139,.1);
    border-color: rgba(100,116,139,.3);
    color: #94a3b8;
}
.chat-presence-toggle--off:hover[b-nkdh8vvxwg] {
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.4);
    color: #22c55e;
}
.chat-presence-dot[b-nkdh8vvxwg] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.chat-presence-toggle--on .chat-presence-dot[b-nkdh8vvxwg] {
    animation: presence-pulse-b-nkdh8vvxwg 2s ease-in-out infinite;
}
@keyframes presence-pulse-b-nkdh8vvxwg {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

.chat-sidebar-head-acts[b-nkdh8vvxwg] { display: flex; gap: .25rem; position: relative; }

/* Global unread badge */
.chat-global-badge[b-nkdh8vvxwg] {
    background: var(--ds-accent, #f97316);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

/* Search */
.chat-search[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .65rem .75rem .45rem;
    padding: .45rem .75rem;
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 8px;
    color: var(--ds-text-muted, var(--ds-text-muted));
    flex-shrink: 0;
    transition: border-color .15s;
}
.chat-search:focus-within[b-nkdh8vvxwg] { border-color: var(--ds-accent, #f97316); }
.chat-search-input[b-nkdh8vvxwg] {
    background: transparent;
    border: none;
    outline: none;
    font-size: .82rem;
    color: var(--ds-text, var(--ds-text));
    flex: 1;
}
.chat-search-input[b-nkdh8vvxwg]::placeholder { color: var(--ds-text-muted, var(--ds-text-muted)); }

/* Filter tabs */
.chat-filter-tabs[b-nkdh8vvxwg] {
    display: flex;
    gap: .25rem;
    padding: 0 .75rem .5rem;
    flex-shrink: 0;
}
.chat-filter-tab[b-nkdh8vvxwg] {
    flex: 1;
    padding: .35rem;
    background: transparent;
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ds-text-sub, var(--ds-text-muted));
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}
.chat-filter-tab:hover[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); color: var(--ds-text, var(--ds-text)); }
.chat-filter-tab.active[b-nkdh8vvxwg] { background: var(--ds-accent-dim, rgba(249,115,22,.15)); border-color: rgba(249,115,22,.4); color: var(--ds-accent, #f97316); }
.chat-tab-badge[b-nkdh8vvxwg] {
    background: var(--ds-accent, #f97316);
    color: #fff;
    font-size: .65rem;
    padding: .1rem .35rem;
    border-radius: 8px;
}

/* Selection bar */
.chat-selection-bar[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .9rem;
    background: rgba(249,115,22,.08);
    font-size: .78rem;
    color: var(--ds-accent, #f97316);
    flex-shrink: 0;
}
.chat-selection-bar button[b-nkdh8vvxwg] { background: transparent; border: none; color: inherit; cursor: pointer; font-size: .78rem; font-weight: 600; }

/* Conv list */
.chat-conv-list[b-nkdh8vvxwg] { flex: 1; overflow-y: auto; overflow-x: hidden; }
.chat-conv-list[b-nkdh8vvxwg]::-webkit-scrollbar { width: 4px; }
.chat-conv-list[b-nkdh8vvxwg]::-webkit-scrollbar-track { background: transparent; }
.chat-conv-list[b-nkdh8vvxwg]::-webkit-scrollbar-thumb { background: var(--ds-border, var(--ds-border)); border-radius: 4px; }

/* Conv row */
.chat-conv-row[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    cursor: pointer;
    transition: background .12s;
    position: relative;
    border-bottom: 1px solid var(--ds-border-subtle, var(--ds-border));
}
.chat-conv-row:hover[b-nkdh8vvxwg]  { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); }
.chat-conv-row.active[b-nkdh8vvxwg] { background: rgba(249,115,22,.1); border-right: 2px solid var(--ds-accent, #f97316); }
.chat-conv-row.has-unread .chat-conv-name[b-nkdh8vvxwg] { font-weight: 700; color: var(--ds-text, var(--ds-text)); }

/* Avatars */
.chat-conv-avatar[b-nkdh8vvxwg],
.chat-topbar-avatar[b-nkdh8vvxwg] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    color: #fff;
}
.chat-avatar-client[b-nkdh8vvxwg] { background: linear-gradient(135deg, #f97316, #ea580c); }
.chat-avatar-user[b-nkdh8vvxwg]   { background: linear-gradient(135deg, #3fb950, #2ea043); }
.chat-avatar-group[b-nkdh8vvxwg]  { background: linear-gradient(135deg, #a78bfa, #7c3aed); font-size: 1rem; }

.chat-online-dot[b-nkdh8vvxwg] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ds-success, #3fb950);
    border: 2px solid var(--ds-bg-surface, var(--ds-bg-surface));
}

/* Conv body */
.chat-conv-body[b-nkdh8vvxwg] { flex: 1; min-width: 0; }
.chat-conv-top[b-nkdh8vvxwg], .chat-conv-bottom[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}
.chat-conv-name[b-nkdh8vvxwg] {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ds-text, var(--ds-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.chat-agent-icon[b-nkdh8vvxwg] { font-size: .7rem; color: var(--ds-success, #3fb950); }
.chat-conv-meta-right[b-nkdh8vvxwg] { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.chat-pin-icon[b-nkdh8vvxwg] { font-size: .7rem; color: var(--ds-text-muted, var(--ds-text-muted)); }

.chat-conv-time[b-nkdh8vvxwg] {
    font-size: .72rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
    flex-shrink: 0;
}
.chat-conv-time.unread-time[b-nkdh8vvxwg] { color: var(--ds-accent, #f97316); font-weight: 600; }

.chat-conv-preview[b-nkdh8vvxwg] {
    font-size: .78rem;
    color: var(--ds-text-sub, var(--ds-text-muted));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    display: flex;
    align-items: center;
    gap: .2rem;
}
.chat-conv-online-txt[b-nkdh8vvxwg] { font-size: .75rem; }
.chat-conv-online-txt.is-online[b-nkdh8vvxwg] { color: var(--ds-success, #3fb950); }

/* Unread badge */
.chat-unread-badge[b-nkdh8vvxwg] {
    background: var(--ds-accent, #f97316);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .42rem;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Context menu button on conv rows */
.chat-conv-ctx-wrap[b-nkdh8vvxwg] { position: relative; flex-shrink: 0; }
.chat-conv-ctx-btn[b-nkdh8vvxwg] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ds-text-muted, var(--ds-text-muted));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.chat-conv-row:hover .chat-conv-ctx-btn[b-nkdh8vvxwg] { opacity: 1; }
.chat-conv-ctx-btn:hover[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); opacity: 1; }
.chat-conv-check[b-nkdh8vvxwg] { flex-shrink: 0; accent-color: var(--ds-accent, #f97316); }

/* Empty list */
.chat-empty-list[b-nkdh8vvxwg] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
}
.chat-empty-list i[b-nkdh8vvxwg] { font-size: 2rem; opacity: .4; display: block; margin-bottom: .75rem; }
.chat-empty-list p[b-nkdh8vvxwg] { font-size: .85rem; }

/* ═══════════════════════════════════════════════════════════════════
   CENTER — MESSAGES AREA
   ═══════════════════════════════════════════════════════════════════ */
.chat-main[b-nkdh8vvxwg] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ds-bg-app, var(--ds-bg-app));
    position: relative;
}

/* Welcome screen */
.chat-welcome[b-nkdh8vvxwg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--ds-text-sub, var(--ds-text-muted));
}
.chat-welcome-icon[b-nkdh8vvxwg] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 2px solid var(--ds-border, var(--ds-border));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--ds-accent, #f97316);
    margin-bottom: 1.25rem;
}
.chat-welcome h3[b-nkdh8vvxwg] { font-size: 1.3rem; font-weight: 700; color: var(--ds-text, var(--ds-text)); margin-bottom: .5rem; }
.chat-welcome p[b-nkdh8vvxwg]  { font-size: .9rem; margin-bottom: 1.5rem; }
.chat-welcome-stats[b-nkdh8vvxwg] { display: flex; gap: 2rem; }
.chat-welcome-stat[b-nkdh8vvxwg] { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.chat-welcome-val[b-nkdh8vvxwg] { font-size: 1.75rem; font-weight: 800; color: var(--ds-text, var(--ds-text)); line-height: 1; }
.chat-welcome-val.chat-welcome-unread[b-nkdh8vvxwg] { color: var(--ds-accent, #f97316); }
.chat-welcome-lbl[b-nkdh8vvxwg] { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.chat-welcome-open-list[b-nkdh8vvxwg] {
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: .65rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border, var(--ds-border));
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    color: var(--ds-text, var(--ds-text));
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.chat-welcome-open-list:hover[b-nkdh8vvxwg] {
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border-color: var(--ds-accent, #f97316);
}

/* Topbar */
.chat-topbar[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .65rem 1rem;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border-bottom: 1px solid var(--ds-border, var(--ds-border));
    flex-shrink: 0;
    z-index: 10;
    position: relative;
}
.chat-topbar-menu-mobile[b-nkdh8vvxwg] { display: none; }
.chat-topbar-contact[b-nkdh8vvxwg] { display: flex; align-items: center; gap: .85rem; flex: 1; min-width: 0; }
.chat-topbar-avatar[b-nkdh8vvxwg] { width: 38px; height: 38px; font-size: .82rem; }
.chat-topbar-info[b-nkdh8vvxwg] { display: flex; flex-direction: column; }
.chat-topbar-name[b-nkdh8vvxwg] { font-size: .95rem; font-weight: 700; color: var(--ds-text, var(--ds-text)); }
.chat-topbar-sub[b-nkdh8vvxwg]  { font-size: .75rem; color: var(--ds-text-sub, var(--ds-text-muted)); display: flex; align-items: center; gap: .3rem; }
.chat-status-dot[b-nkdh8vvxwg] { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-text-muted, var(--ds-text-muted)); }
.chat-status-dot.online[b-nkdh8vvxwg] { background: var(--ds-success, #3fb950); }
.chat-topbar-acts[b-nkdh8vvxwg] { display: flex; align-items: center; gap: .15rem; position: relative; }

/* Storage warning */
.chat-storage-warn[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: rgba(210,153,34,.12);
    border-bottom: 1px solid rgba(210,153,34,.3);
    color: var(--ds-warning, #d29922);
    font-size: .8rem;
    flex-shrink: 0;
}
.chat-storage-warn button[b-nkdh8vvxwg] { background: transparent; border: none; color: inherit; cursor: pointer; margin-left: auto; }

/* Team send failure (HTTP / API) */
.chat-team-send-warn[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .55rem 1rem;
    background: rgba(248,81,73,.12);
    border-bottom: 1px solid rgba(248,81,73,.35);
    color: var(--ds-danger, #f85149);
    font-size: .78rem;
    flex-shrink: 0;
}
.chat-team-send-warn-text[b-nkdh8vvxwg] { flex: 1 1 180px; min-width: 0; word-break: break-word; }
.chat-team-send-warn-retry[b-nkdh8vvxwg] { flex-shrink: 0; border-color: rgba(255,255,255,.35) !important; color: inherit !important; }
.chat-team-send-warn-dismiss[b-nkdh8vvxwg] {
    flex-shrink: 0;
    padding: .15rem .35rem !important;
    color: inherit !important;
    opacity: .85;
    text-decoration: none !important;
}

.chat-team-loading-older[b-nkdh8vvxwg] {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: .78rem;
}

.msg-status-failed[b-nkdh8vvxwg] { color: var(--ds-danger, #f85149); font-size: .95em; vertical-align: -0.05em; }
.msg-status-failed-wrap[b-nkdh8vvxwg] { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.msg-retry-persist[b-nkdh8vvxwg] {
    font-size: .68rem;
    padding: 0 .35rem;
    line-height: 1.2;
    border: 1px solid rgba(248,81,73,.45);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
}
.msg-retry-persist:hover[b-nkdh8vvxwg] { background: rgba(248,81,73,.12); }

/* Messages body */
.chat-body[b-nkdh8vvxwg] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.chat-body[b-nkdh8vvxwg]::-webkit-scrollbar { width: 5px; }
.chat-body[b-nkdh8vvxwg]::-webkit-scrollbar-track { background: transparent; }
.chat-body[b-nkdh8vvxwg]::-webkit-scrollbar-thumb { background: var(--ds-border, var(--ds-border)); border-radius: 4px; }

/* Date separator */
.chat-date-sep[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .75rem 0 .5rem;
}
.chat-date-sep span[b-nkdh8vvxwg] {
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 12px;
    padding: .2rem .75rem;
    font-size: .72rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
}

/* ── Message rows ────────────────────────────────────────────────── */
.chat-msg[b-nkdh8vvxwg] {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: .25rem;
    position: relative;
}
.msg-out[b-nkdh8vvxwg] { flex-direction: row-reverse; }
.msg-in[b-nkdh8vvxwg]  { flex-direction: row; }
.msg-group-sender[b-nkdh8vvxwg] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ds-accent, #f97316);
    margin-bottom: .15rem;
}

/* Bubble */
.msg-bubble[b-nkdh8vvxwg] {
    max-width: 68%;
    min-width: 80px;
    padding: .55rem .75rem;
    border-radius: 14px;
    position: relative;
    word-break: break-word;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: box-shadow .15s;
}
.msg-out .msg-bubble[b-nkdh8vvxwg] {
    background: #1a3a5c;
    border-bottom-right-radius: 4px;
    color: #ddeeff;
}
.msg-in .msg-bubble[b-nkdh8vvxwg] {
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-bottom-left-radius: 4px;
    color: var(--ds-text, var(--ds-text));
}
.msg-bubble.msg-deleted[b-nkdh8vvxwg] {
    opacity: .5;
    font-style: italic;
}
.msg-bubble.msg-starred[b-nkdh8vvxwg] {
    outline: 1px solid rgba(210,153,34,.4);
}

/* Reply reference */
.msg-reply-ref[b-nkdh8vvxwg] {
    padding: .3rem .6rem;
    border-left: 3px solid var(--ds-accent, #f97316);
    background: rgba(249,115,22,.08);
    border-radius: 4px;
    font-size: .75rem;
    color: var(--ds-text-sub, var(--ds-text-muted));
    margin-bottom: .35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Message text */
.msg-text[b-nkdh8vvxwg] { display: block; font-size: .875rem; line-height: 1.45; white-space: pre-wrap; }

/* Attachments */
.msg-img-wrap img[b-nkdh8vvxwg] {
    max-width: 280px;
    width: 100%;
    border-radius: 8px;
    display: block;
    margin-bottom: .3rem;
}
.msg-media-wrap video[b-nkdh8vvxwg],
.msg-audio-wrap audio[b-nkdh8vvxwg] { max-width: 280px; width: 100%; border-radius: 6px; display: block; }
.msg-doc-wrap[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    background: rgba(255,255,255,.06);
    border-radius: 8px;
    font-size: .8rem;
}
.msg-doc-wrap button[b-nkdh8vvxwg] { background: transparent; border: 1px solid var(--ds-border, var(--ds-border)); border-radius: 6px; padding: .25rem .5rem; color: var(--ds-text-sub, var(--ds-text-muted)); cursor: pointer; }

/* Footer (time + status) */
.msg-footer[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .25rem;
    justify-content: flex-end;
    margin-top: .25rem;
    flex-wrap: wrap;
}
.msg-time[b-nkdh8vvxwg]   { font-size: .68rem; color: var(--ds-text-muted, var(--ds-text-muted)); }
.msg-edited[b-nkdh8vvxwg] { font-size: .66rem; color: var(--ds-text-muted, var(--ds-text-muted)); font-style: italic; }
.msg-status[b-nkdh8vvxwg] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .72rem;
    line-height: 1;
    margin-left: .1rem;
}
.msg-tick-sent[b-nkdh8vvxwg]       { color: var(--ds-text-muted, #9c948a); }
.msg-tick-delivered[b-nkdh8vvxwg]  { color: var(--ds-text-muted, #9c948a); }
.msg-tick-seen[b-nkdh8vvxwg],
.msg-seen[b-nkdh8vvxwg]            { color: #53bdeb; }

.msg-out .msg-time[b-nkdh8vvxwg] {
    color: rgba(221, 238, 255, 0.62);
}
.msg-out .msg-edited[b-nkdh8vvxwg] {
    color: rgba(221, 238, 255, 0.5);
}
.msg-out .msg-tick-sent[b-nkdh8vvxwg],
.msg-out .msg-tick-delivered[b-nkdh8vvxwg] {
    color: rgba(221, 238, 255, 0.55);
}
.msg-out .msg-tick-seen[b-nkdh8vvxwg],
.msg-out .msg-seen[b-nkdh8vvxwg] {
    color: #53bdeb;
}

/* Reactions */
.msg-reactions[b-nkdh8vvxwg] {
    font-size: .85rem;
    margin-top: .15rem;
    padding: .1rem .4rem;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 12px;
    display: inline-flex;
    gap: .2rem;
    align-self: flex-start;
}
.msg-out + .msg-reactions[b-nkdh8vvxwg] { align-self: flex-end; }

/* Message actions (hover) */
.msg-actions[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity .15s;
    position: relative;
    flex-shrink: 0;
}
.chat-msg:hover .msg-actions[b-nkdh8vvxwg] { opacity: 1; }
.msg-action-btn[b-nkdh8vvxwg] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    color: var(--ds-text-sub, var(--ds-text-muted));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
}
.msg-action-btn:hover[b-nkdh8vvxwg] { background: var(--ds-border, var(--ds-border)); }

/* Message context dropdown */
.chat-msg-ctx[b-nkdh8vvxwg] {
    position: absolute;
    top: 0;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 10px;
    padding: .3rem;
    z-index: 200;
    min-width: 165px;
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    animation: fadeDown-b-nkdh8vvxwg .12s ease;
}
.ctx-left[b-nkdh8vvxwg]  { right: 100%; margin-right: 4px; }
.ctx-right[b-nkdh8vvxwg] { left: 100%;  margin-left: 4px; }
.chat-msg-ctx-item[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .4rem .65rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: .8rem;
    color: var(--ds-text, var(--ds-text));
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}
.chat-msg-ctx-item:hover[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); }
.chat-msg-ctx-item.danger[b-nkdh8vvxwg] { color: var(--ds-danger, #f85149); }
.chat-msg-ctx-item.danger:hover[b-nkdh8vvxwg] { background: var(--ds-danger-dim, rgba(248,81,73,.1)); }
.chat-msg-ctx-item.starred-on[b-nkdh8vvxwg] { color: var(--ds-warning, #d29922); }

.chat-no-messages[b-nkdh8vvxwg] {
    flex: 1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ds-text-muted, var(--ds-text-muted));
}
.chat-no-messages i[b-nkdh8vvxwg] { font-size: 2rem; opacity: .35; display: block; margin-bottom: .75rem; }
.chat-no-messages p[b-nkdh8vvxwg] { font-size: .85rem; }

/* ── Input bar ───────────────────────────────────────────────────── */
.chat-input-bar[b-nkdh8vvxwg] {
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border-top: 1px solid var(--ds-border, var(--ds-border));
    flex-shrink: 0;
}

.chat-reply-bar[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: rgba(249,115,22,.06);
    border-bottom: 1px solid var(--ds-border, var(--ds-border));
    font-size: .8rem;
    color: var(--ds-text-sub, var(--ds-text-muted));
}

.chat-input-row[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .62rem .75rem;
}
.chat-input-left[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .22rem;
    flex-shrink: 0;
}

/* Icônes plus étroites que la barre latérale : libère de la largeur pour le champ */
.chat-input-left .chat-icon-btn[b-nkdh8vvxwg] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: .8rem;
    border-radius: 7px;
}

/* Emoji picker */
.chat-emoji-wrap[b-nkdh8vvxwg] { position: relative; }
.chat-emoji-picker[b-nkdh8vvxwg] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 12px;
    padding: .5rem;
    z-index: 300;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    animation: fadeDown-b-nkdh8vvxwg .12s ease;
}
.chat-emoji-grid[b-nkdh8vvxwg] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}
.chat-emoji-btn[b-nkdh8vvxwg] {
    background: transparent;
    border: none;
    font-size: 1.15rem;
    padding: .25rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background .1s;
}
.chat-emoji-btn:hover[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); }

.chat-input-field[b-nkdh8vvxwg] {
    flex: 1 1 0%;
    min-width: 0;
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 20px;
    padding: .52rem .8rem;
    color: var(--ds-text, var(--ds-text));
    font-size: .875rem;
    outline: none;
    transition: border-color .15s;
}
.chat-input-field:focus[b-nkdh8vvxwg] { border-color: var(--ds-accent, #f97316); }
.chat-input-field[b-nkdh8vvxwg]::placeholder { color: var(--ds-text-muted, var(--ds-text-muted)); }

.chat-send-btn[b-nkdh8vvxwg] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    color: var(--ds-text-muted, var(--ds-text-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .84rem;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.chat-send-btn.ready[b-nkdh8vvxwg] {
    background: var(--ds-accent, #f97316);
    color: #fff;
    box-shadow: 0 2px 10px rgba(249,115,22,.4);
}
.chat-send-btn.ready:hover[b-nkdh8vvxwg] { background: var(--ds-accent-hover, #fb923c); }

/* ═══════════════════════════════════════════════════════════════════
   RIGHT — CRM PANEL
   ═══════════════════════════════════════════════════════════════════ */
.chat-crm[b-nkdh8vvxwg] {
    width: 0;
    overflow: hidden;
    transition: width .22s ease;
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border-left: 1px solid var(--ds-border, var(--ds-border));
    display: flex;
    flex-direction: column;
}
.chat-crm.open[b-nkdh8vvxwg] {
    width: 280px;
    overflow-y: auto;
}
.chat-crm[b-nkdh8vvxwg]::-webkit-scrollbar { width: 4px; }
.chat-crm[b-nkdh8vvxwg]::-webkit-scrollbar-thumb { background: var(--ds-border, var(--ds-border)); border-radius: 4px; }

/* CRM head */
.crm-head[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--ds-border, var(--ds-border));
    flex-shrink: 0;
}
.crm-avatar[b-nkdh8vvxwg] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.crm-avatar-client[b-nkdh8vvxwg] { background: linear-gradient(135deg, #f97316, #ea580c); }
.crm-avatar-user[b-nkdh8vvxwg]   { background: linear-gradient(135deg, #3fb950, #2ea043); }

.crm-identity h3[b-nkdh8vvxwg] { font-size: .9rem; font-weight: 700; color: var(--ds-text, var(--ds-text)); margin: 0 0 .15rem; }
.crm-identity span[b-nkdh8vvxwg] { font-size: .75rem; color: var(--ds-text-sub, var(--ds-text-muted)); }

/* Tags */
.crm-tags[b-nkdh8vvxwg] { display: flex; flex-wrap: wrap; gap: .35rem; padding: .65rem 1rem; }
.crm-tag[b-nkdh8vvxwg] {
    padding: .2rem .6rem;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    border: 1px solid var(--ds-border, var(--ds-border));
    color: var(--ds-text-sub, var(--ds-text-muted));
}
.crm-tag-vip[b-nkdh8vvxwg]     { background: rgba(210,153,34,.12); border-color: rgba(210,153,34,.3); color: var(--ds-warning, #d29922); }
.crm-tag-agent[b-nkdh8vvxwg]   { background: rgba(63,185,80,.1);   border-color: rgba(63,185,80,.3);  color: var(--ds-success, #3fb950); }
.crm-tag-actif[b-nkdh8vvxwg]   { background: rgba(249,115,22,.1);  border-color: rgba(249,115,22,.3); color: var(--ds-accent, #f97316); }
.crm-tag-nouveau[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); }

/* Section */
.crm-section[b-nkdh8vvxwg] { padding: .75rem 1rem; border-bottom: 1px solid var(--ds-border-subtle, var(--ds-border)); }
.crm-section-title[b-nkdh8vvxwg] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ds-text-muted, var(--ds-text-muted));
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
}

/* Status buttons */
.crm-status-row[b-nkdh8vvxwg] { display: flex; gap: .35rem; flex-wrap: wrap; }
.crm-status-btn[b-nkdh8vvxwg] {
    flex: 1;
    padding: .3rem .4rem;
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--ds-text-sub, var(--ds-text-muted));
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.crm-status-btn.on.status-new[b-nkdh8vvxwg]    { background: rgba(121,192,255,.1); border-color: rgba(121,192,255,.4); color: var(--ds-info, #79c0ff); }
.crm-status-btn.on.status-open[b-nkdh8vvxwg]   { background: rgba(210,153,34,.1);  border-color: rgba(210,153,34,.4);  color: var(--ds-warning, #d29922); }
.crm-status-btn.on.status-closed[b-nkdh8vvxwg] { background: rgba(63,185,80,.1);   border-color: rgba(63,185,80,.4);   color: var(--ds-success, #3fb950); }

/* WA button */
.crm-wa-btn[b-nkdh8vvxwg] {
    width: 100%;
    padding: .5rem .75rem;
    background: rgba(37,211,102,.1);
    border: 1px solid rgba(37,211,102,.3);
    border-radius: 8px;
    color: #25d366;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
}
.crm-wa-btn:hover[b-nkdh8vvxwg] { background: rgba(37,211,102,.18); }

/* Order card */
.crm-order-card[b-nkdh8vvxwg] {
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    border-radius: 8px;
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    border: 1px solid var(--ds-border, var(--ds-border));
}
.crm-order-row[b-nkdh8vvxwg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .78rem;
    padding: .2rem 0;
}
.crm-order-row span:first-child[b-nkdh8vvxwg] { color: var(--ds-text-muted, var(--ds-text-muted)); }
.crm-order-row span:last-child[b-nkdh8vvxwg],
.crm-order-row strong[b-nkdh8vvxwg] { color: var(--ds-text, var(--ds-text)); font-size: .8rem; }
.crm-empty[b-nkdh8vvxwg] { font-size: .78rem; color: var(--ds-text-muted, var(--ds-text-muted)); }

/* Action buttons */
.crm-action-btn[b-nkdh8vvxwg] {
    width: 100%;
    padding: .45rem .75rem;
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 8px;
    color: var(--ds-text-sub, var(--ds-text-muted));
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    margin-top: .35rem;
}
.crm-action-btn:hover[b-nkdh8vvxwg] { background: var(--ds-border, var(--ds-border)); color: var(--ds-text, var(--ds-text)); }

/* Perfume row */
.crm-perfume-row[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .1rem;
    border-bottom: 1px solid var(--ds-border-subtle, var(--ds-border));
}
.crm-perfume-row:last-of-type[b-nkdh8vvxwg] { border-bottom: none; }
.crm-perfume-name[b-nkdh8vvxwg] { display: block; font-size: .78rem; color: var(--ds-text, var(--ds-text)); }
.crm-perfume-price[b-nkdh8vvxwg] { display: block; font-size: .72rem; color: var(--ds-text-muted, var(--ds-text-muted)); }

/* Quick action grid */
.crm-quick-grid[b-nkdh8vvxwg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.crm-quick-btn[b-nkdh8vvxwg] {
    padding: .55rem .4rem;
    border-radius: 8px;
    border: 1px solid var(--ds-border, var(--ds-border));
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    color: var(--ds-text-sub, var(--ds-text-muted));
    transition: all .15s;
}
.crm-quick-btn i[b-nkdh8vvxwg] { font-size: 1rem; }
.crm-quick-btn:hover[b-nkdh8vvxwg] { border-color: currentColor; }
.crm-q-promo[b-nkdh8vvxwg]   { color: #ff9500; }
.crm-q-follow[b-nkdh8vvxwg]  { color: var(--ds-accent, #f97316); }
.crm-q-greet[b-nkdh8vvxwg]   { color: var(--ds-success, #3fb950); }
.crm-q-invoice[b-nkdh8vvxwg] { color: var(--ds-purple, #a78bfa); }

/* ═══════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════ */
.chat-backdrop[b-nkdh8vvxwg],
.chat-modal-backdrop[b-nkdh8vvxwg] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(3px);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.chat-backdrop[b-nkdh8vvxwg] { z-index: 150; background: transparent; }

.chat-modal[b-nkdh8vvxwg] {
    background: var(--ds-bg-surface, var(--ds-bg-surface));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 14px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 64px rgba(0,0,0,.65);
    animation: slideUp-b-nkdh8vvxwg .18s ease;
    overflow: hidden;
}
.chat-modal-lg[b-nkdh8vvxwg] { max-width: 520px; }

.chat-modal-head[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--ds-border, var(--ds-border));
    font-size: .9rem;
    font-weight: 700;
    color: var(--ds-text, var(--ds-text));
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
}
.chat-modal-head button[b-nkdh8vvxwg] { background: transparent; border: none; color: var(--ds-text-sub, var(--ds-text-muted)); cursor: pointer; font-size: .85rem; }
.chat-modal-head button:hover[b-nkdh8vvxwg] { color: var(--ds-text, var(--ds-text)); }

.chat-modal-body[b-nkdh8vvxwg] {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    max-height: 55vh;
    overflow-y: auto;
    font-size: .875rem;
    color: var(--ds-text, var(--ds-text));
}
.chat-modal-body p[b-nkdh8vvxwg] { margin: 0; }
.chat-modal-body .text-muted[b-nkdh8vvxwg] { color: var(--ds-text-sub, var(--ds-text-muted)); }
.chat-modal-body code[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); padding: .1rem .35rem; border-radius: 4px; font-size: .78rem; }

.chat-modal-input[b-nkdh8vvxwg] {
    width: 100%;
    padding: .55rem .8rem;
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
    border: 1px solid var(--ds-border, var(--ds-border));
    border-radius: 8px;
    color: var(--ds-text, var(--ds-text));
    font-size: .875rem;
    outline: none;
    box-sizing: border-box;
}
.chat-modal-input:focus[b-nkdh8vvxwg] { border-color: var(--ds-accent, #f97316); }
.chat-modal-textarea[b-nkdh8vvxwg] { resize: vertical; min-height: 80px; }

.chat-modal-checklist[b-nkdh8vvxwg] { display: flex; flex-direction: column; gap: .35rem; }
.chat-modal-check-item[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .82rem;
}
.chat-modal-check-item:hover[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); }
.chat-modal-check-item input[b-nkdh8vvxwg] { accent-color: var(--ds-accent, #f97316); }

.chat-modal-actions[b-nkdh8vvxwg] { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

.chat-modal-btn-primary[b-nkdh8vvxwg] {
    width: 100%;
    padding: .55rem .75rem;
    background: var(--ds-accent, #f97316);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-modal-btn-primary:hover:not(:disabled)[b-nkdh8vvxwg] { background: var(--ds-accent-hover, #fb923c); }
.chat-modal-btn-primary:disabled[b-nkdh8vvxwg] { opacity: .45; cursor: not-allowed; }

.chat-modal-btn-wa[b-nkdh8vvxwg] {
    width: 100%;
    padding: .5rem .75rem;
    background: rgba(37,211,102,.12);
    border: 1px solid rgba(37,211,102,.3);
    border-radius: 8px;
    color: #25d366;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-modal-btn-tel[b-nkdh8vvxwg] {
    width: 100%;
    padding: .5rem .75rem;
    background: rgba(249,115,22,.1);
    border: 1px solid rgba(249,115,22,.3);
    border-radius: 8px;
    color: var(--ds-accent, #f97316);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-modal-foot[b-nkdh8vvxwg] {
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--ds-border, var(--ds-border));
    background: var(--ds-bg-elevated, var(--ds-bg-elevated));
}

/* Forward modal */
.chat-forward-row[b-nkdh8vvxwg] {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .45rem .5rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--ds-text, var(--ds-text));
}
.chat-forward-row:hover[b-nkdh8vvxwg] { background: var(--ds-bg-elevated, var(--ds-bg-elevated)); }
.chat-forward-name[b-nkdh8vvxwg] { font-size: .85rem; font-weight: 600; }
.chat-forward-phone[b-nkdh8vvxwg] { font-size: .75rem; color: var(--ds-text-sub, var(--ds-text-muted)); }

/* App lock overlay */
.chat-lock-overlay[b-nkdh8vvxwg] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(6px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-lock-box[b-nkdh8vvxwg] { text-align: center; color: var(--ds-text, var(--ds-text)); }
.chat-lock-box i[b-nkdh8vvxwg] { font-size: 3rem; color: var(--ds-warning, #d29922); margin-bottom: 1rem; display: block; }
.chat-lock-box h3[b-nkdh8vvxwg] { margin-bottom: .75rem; }
.chat-lock-box button[b-nkdh8vvxwg] {
    padding: .55rem 1.5rem;
    background: var(--ds-accent, #f97316);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes fadeDown-b-nkdh8vvxwg  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp-b-nkdh8vvxwg   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .chat-sidebar[b-nkdh8vvxwg] { width: 260px; }
    .chat-crm.open[b-nkdh8vvxwg] { width: 240px; }
    .msg-bubble[b-nkdh8vvxwg] { max-width: 80%; }
}

@media (max-width: 660px) {
    /* Accueil : bloc (icône + titre + texte + stats) centré verticalement ; marge basse pour le FAB */
    .chat-welcome[b-nkdh8vvxwg] {
        justify-content: center;
        padding-top: 1rem;
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
        gap: 0.15rem;
    }
    .chat-welcome-stats[b-nkdh8vvxwg] {
        gap: clamp(1.25rem, 8vw, 2rem);
        margin-top: 0.75rem;
    }
    .chat-shell[b-nkdh8vvxwg] {
        width: 100%;
        max-width: 100%;
    }
    .chat-sidebar[b-nkdh8vvxwg] {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.6);
        width: min(320px, 88vw);
        max-width: 88vw;
    }
    .chat-sidebar.chat-sidebar--open[b-nkdh8vvxwg] {
        transform: translateX(0);
    }
    .chat-sidebar-backdrop[b-nkdh8vvxwg] {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 99;
        background: rgba(0, 0, 0, 0.45);
        -webkit-tap-highlight-color: transparent;
    }
    .chat-welcome-open-list[b-nkdh8vvxwg] { display: inline-flex; }
    .chat-topbar-menu-mobile[b-nkdh8vvxwg] { display: flex; }
    .chat-crm.open[b-nkdh8vvxwg] { width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 100; }
    .msg-bubble[b-nkdh8vvxwg] { max-width: 90%; }
    /* Mobile : garde un vrai espace entre bloc d’icônes, champ et envoi */
    .chat-input-row[b-nkdh8vvxwg] {
        gap: .48rem;
        padding: .52rem .42rem;
    }
    .chat-input-left[b-nkdh8vvxwg] {
        gap: .18rem;
    }
    .chat-input-left .chat-icon-btn[b-nkdh8vvxwg] {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: .76rem;
    }
    .chat-send-btn[b-nkdh8vvxwg] {
        width: 32px;
        height: 32px;
        font-size: .78rem;
    }
    .chat-input-field[b-nkdh8vvxwg] {
        padding: .48rem .62rem;
        font-size: .82rem;
    }
}
/* /Pages/Ecommerce.razor.rz.scp.css */
/* ========== UNIFIED ECOMMERCE PAGE - ALL SECTIONS TOGETHER ========== */

[b-93v1axinu9] .ecommerce-unified-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

[b-93v1axinu9] .main-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ========== SECTION CONTAINERS ========== */
[b-93v1axinu9] .section-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    margin-bottom: 2rem;
    animation: fadeInUp-b-93v1axinu9 0.6s ease-out;
}

[b-93v1axinu9] .form-section {
    padding: 1.25rem;
}

[b-93v1axinu9] .client-status-box {
    font-size: 0.9rem;
}
[b-93v1axinu9] .client-status-box.client-deja {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
[b-93v1axinu9] .client-status-box.client-nouveau {
    background: #e9ecef;
    border: 1px solid #dee2e6;
    color: #495057;
}

[b-93v1axinu9] .section-container:last-child {
    margin-bottom: 0;
}

@keyframes fadeInUp-b-93v1axinu9 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-93v1axinu9] .section-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

/* ========== CLIENT FORM STYLES ========== */
[b-93v1axinu9] .compact-form {
    padding: 0;
}

[b-93v1axinu9] .form-label {
    color: #2d3748;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

[b-93v1axinu9] .form-control {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #f8fafc;
    color: #2d3748;
}

[b-93v1axinu9] .form-control:focus {
    border-color: #667eea;
    background-color: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    outline: none;
    transform: translateY(-2px);
}

[b-93v1axinu9] .form-control::placeholder {
    color: #a0aec0;
    font-style: italic;
}

[b-93v1axinu9] textarea.form-control {
    resize: vertical;
    min-height: 60px;
}

[b-93v1axinu9] .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

[b-93v1axinu9] .input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 2px solid #e2e8f0;
    border-left: none;
    background-color: #f8fafc;
    transition: all 0.3s ease;
}

[b-93v1axinu9] .input-group .btn:hover {
    background-color: #667eea;
    border-color: #667eea;
    color: white;
    transform: scale(1.05);
}

[b-93v1axinu9] .city-dropdown {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
    margin-top: 0.5rem;
    animation: slideDown-b-93v1axinu9 0.3s ease-out;
    z-index: 1000;
}

@keyframes slideDown-b-93v1axinu9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-93v1axinu9] .city-dropdown .list-group-item {
    border: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: white;
}

[b-93v1axinu9] .city-dropdown .list-group-item:last-child {
    border-bottom: none;
}

[b-93v1axinu9] .city-dropdown .list-group-item:hover {
    background: linear-gradient(90deg, #667eea15, transparent);
    padding-left: 1.5rem;
    color: #667eea;
    font-weight: 600;
}

/* ========== BUTTONS ========== */
[b-93v1axinu9] .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

[b-93v1axinu9] .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

[b-93v1axinu9] .btn-primary:hover::before {
    left: 100%;
}

[b-93v1axinu9] .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5);
}

[b-93v1axinu9] .btn-outline-secondary {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: #64748b;
    background-color: white;
    transition: all 0.3s ease;
}

[b-93v1axinu9] .btn-outline-secondary:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
    color: #475569;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ========== STATISTICS STYLES ========== */
[b-93v1axinu9] .stat-card {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-left: 5px solid;
    animation: fadeInUp-b-93v1axinu9 0.5s ease-out;
    animation-fill-mode: both;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

[b-93v1axinu9] .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

[b-93v1axinu9] .stat-card:hover::before {
    transform: translateX(100%);
}

[b-93v1axinu9] .stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Stat Card Colors */
[b-93v1axinu9] .stat-card-reporte { border-left-color: #4a5568; animation-delay: 0.1s; }
[b-93v1axinu9] .stat-card-ozon { border-left-color: #9f7aea; animation-delay: 0.2s; }
[b-93v1axinu9] .stat-card-preparation { border-left-color: #ed8936; animation-delay: 0.3s; }
[b-93v1axinu9] .stat-card-total { border-left-color: #4299e1; animation-delay: 0.4s; background: linear-gradient(135deg, #ffffff 0%, #e6f2ff 100%); }
[b-93v1axinu9] .stat-card-retourne { border-left-color: #fc8181; animation-delay: 0.5s; }
[b-93v1axinu9] .stat-card-annule { border-left-color: #f56565; animation-delay: 0.6s; }
[b-93v1axinu9] .stat-card-livre { border-left-color: #48bb78; animation-delay: 0.7s; }
[b-93v1axinu9] .stat-card-expedie { border-left-color: #38b2ac; animation-delay: 0.8s; }
[b-93v1axinu9] .stat-card-net { border-left-color: #48bb78; background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%); animation-delay: 0.9s; }
[b-93v1axinu9] .stat-card-revenu { border-left-color: #4299e1; background: linear-gradient(135deg, #ffffff 0%, #e6f2ff 100%); animation-delay: 1s; }

[b-93v1axinu9] .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

[b-93v1axinu9] .stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
}

[b-93v1axinu9] .stat-card-reporte .stat-icon { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); color: white; }
[b-93v1axinu9] .stat-card-ozon .stat-icon { background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%); color: white; }
[b-93v1axinu9] .stat-card-preparation .stat-icon { background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); color: white; }
[b-93v1axinu9] .stat-card-total .stat-icon { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); color: white; }
[b-93v1axinu9] .stat-card-retourne .stat-icon { background: linear-gradient(135deg, #fc8181 0%, #f56565 100%); color: white; }
[b-93v1axinu9] .stat-card-annule .stat-icon { background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%); color: white; }
[b-93v1axinu9] .stat-card-livre .stat-icon { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; }
[b-93v1axinu9] .stat-card-expedie .stat-icon { background: linear-gradient(135deg, #38b2ac 0%, #319795 100%); color: white; }
[b-93v1axinu9] .stat-card-net .stat-icon { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; }
[b-93v1axinu9] .stat-card-revenu .stat-icon { background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%); color: white; }

[b-93v1axinu9] .stat-content {
    flex: 1;
}

[b-93v1axinu9] .stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

[b-93v1axinu9] .stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: #2d3748;
    line-height: 1;
}

[b-93v1axinu9] .stat-value-financial {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    line-height: 1;
}

[b-93v1axinu9] .stat-card-financial {
    min-height: 140px;
    padding: 2rem;
}

[b-93v1axinu9] .stat-card-financial .stat-icon {
    width: 70px;
    height: 70px;
}

[b-93v1axinu9] .stat-card-financial:hover {
    transform: translateY(-10px) scale(1.02);
}

/* ========== ORDERS MANAGEMENT TABLE STYLES ========== */
[b-93v1axinu9] .colis-header {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

[b-93v1axinu9] .filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

[b-93v1axinu9] .filter-select,
[b-93v1axinu9] .search-input {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

[b-93v1axinu9] .filter-select:focus,
[b-93v1axinu9] .search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

[b-93v1axinu9] .btn-export {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    width: 100%;
}

[b-93v1axinu9] .btn-export:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(72, 187, 120, 0.4);
}

[b-93v1axinu9] .btn-scan {
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

[b-93v1axinu9] .btn-scan:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[b-93v1axinu9] .btn-apply {
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

[b-93v1axinu9] .btn-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

[b-93v1axinu9] .colis-table-container {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[b-93v1axinu9] .table {
    margin-bottom: 0;
}

[b-93v1axinu9] .table thead th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    padding: 1rem;
    border: none;
}

[b-93v1axinu9] .table tbody td {
    padding: 1.25rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0;
}

[b-93v1axinu9] .table tbody tr:hover {
    background-color: #f7fafc;
    transition: background-color 0.2s ease;
}

[b-93v1axinu9] .actions-cell {
    min-width: 200px;
}

[b-93v1axinu9] .actions-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-93v1axinu9] .action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}

[b-93v1axinu9] .btn-action {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.4rem;
    font-size: 0.75rem;
    background: white;
    color: #4a5568;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

[b-93v1axinu9] .btn-action:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[b-93v1axinu9] .btn-delivered:hover { background: #48bb78; color: white; border-color: #48bb78; }
[b-93v1axinu9] .btn-shipped:hover { background: #38b2ac; color: white; border-color: #38b2ac; }
[b-93v1axinu9] .btn-postponed:hover { background: #ed8936; color: white; border-color: #ed8936; }
[b-93v1axinu9] .btn-delete:hover { background: #f56565; color: white; border-color: #f56565; }
[b-93v1axinu9] .btn-cancel:hover { background: #cbd5e0; color: #2d3748; border-color: #cbd5e0; }

[b-93v1axinu9] .status-badge {
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: none;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

[b-93v1axinu9] .status-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* EN PRÉPARATION - Orange/Yellow */
[b-93v1axinu9] .status-en-preparation,
[b-93v1axinu9] .status-en-pr-paration { 
    background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* LIVRÉ - Green */
[b-93v1axinu9] .status-livre,
[b-93v1axinu9] .status-livr- { 
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* EXPÉDIÉ - Blue/Cyan */
[b-93v1axinu9] .status-expedie,
[b-93v1axinu9] .status-exp-di- { 
    background: linear-gradient(135deg, #17a2b8 0%, #007bff 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* REPORTÉ - Orange */
[b-93v1axinu9] .status-reporte,
[b-93v1axinu9] .status-report- { 
    background: linear-gradient(135deg, #fd7e14 0%, #ff6b35 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ANNULÉ - Red */
[b-93v1axinu9] .status-annule,
[b-93v1axinu9] .status-annul- { 
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* CHEZ OZON - Purple */
[b-93v1axinu9] .status-chez-ozon { 
    background: linear-gradient(135deg, #9f7aea 0%, #7c3aed 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* RETOURNÉ - Pink/Red */
[b-93v1axinu9] .status-retourne,
[b-93v1axinu9] .status-retourn- { 
    background: linear-gradient(135deg, #e83e8c 0%, #dc3545 100%) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[b-93v1axinu9] .tracking-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

[b-93v1axinu9] .barcode-placeholder {
    width: 120px;
    height: 40px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

[b-93v1axinu9] .barcode-lines {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(90deg, #000 0px, #000 2px, transparent 2px, transparent 4px);
    background-size: 4px 100%;
}

[b-93v1axinu9] .tracking-number {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.875rem;
    color: #2d3748;
    letter-spacing: 1px;
}

/* ========== ALERTS ========== */
[b-93v1axinu9] .alert {
    border-radius: 12px;
    border: none;
    padding: 1.25rem 1.5rem;
    font-weight: 500;
    animation: slideInRight-b-93v1axinu9 0.4s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes slideInRight-b-93v1axinu9 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[b-93v1axinu9] .alert-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
}

[b-93v1axinu9] .alert-danger {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
}

[b-93v1axinu9] .alert-info {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    color: white;
}

[b-93v1axinu9] .alert-warning {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
    color: white;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    [b-93v1axinu9] .main-title {
        font-size: 1.75rem;
    }

    [b-93v1axinu9] .section-container {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    [b-93v1axinu9] .section-title {
        font-size: 1.5rem;
    }

    [b-93v1axinu9] .action-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-93v1axinu9] .stat-card {
        padding: 1.5rem;
    }

    [b-93v1axinu9] .stat-icon {
        width: 50px;
        height: 50px;
    }

    [b-93v1axinu9] .stat-value {
        font-size: 1.75rem;
    }
}

/* ========== RETOUR COLIS SECTION ========== */
[b-93v1axinu9] .retour-colis-section {
    padding: 0;
    margin-bottom: 1.5rem;
}

[b-93v1axinu9] .retour-colis-banner {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

[b-93v1axinu9] .retour-colis-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

[b-93v1axinu9] .retour-colis-icon-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

[b-93v1axinu9] .retour-icon {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

[b-93v1axinu9] .retour-colis-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[b-93v1axinu9] .retour-colis-subtitle {
    color: rgba(255,255,255,0.95);
    font-size: 0.95rem;
    margin: 0.25rem 0 0 0;
}

[b-93v1axinu9] .btn-retour-scan {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

[b-93v1axinu9] .btn-retour-scan:hover {
    background: white;
    color: #dc3545;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

[b-93v1axinu9] .btn-retour-scan:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    [b-93v1axinu9] .retour-colis-content {
        flex-direction: column;
        text-align: center;
    }

    [b-93v1axinu9] .retour-colis-icon-title {
        flex-direction: column;
        text-align: center;
    }

    [b-93v1axinu9] .btn-retour-scan {
        width: 100%;
        justify-content: center;
    }
}

/* Scrollbar */
[b-93v1axinu9] .city-dropdown::-webkit-scrollbar {
    width: 8px;
}

[b-93v1axinu9] .city-dropdown::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

[b-93v1axinu9] .city-dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

/* ========== EDIT MODAL COMPACT STYLES ========== */
[b-93v1axinu9] .edit-modal-dialog {
    max-width: 700px;
}

[b-93v1axinu9] .edit-modal-content {
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

[b-93v1axinu9] .edit-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 15px 15px 0 0;
}

[b-93v1axinu9] .edit-modal-header .modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

[b-93v1axinu9] .edit-modal-body {
    padding: 1rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

[b-93v1axinu9] .edit-modal-body .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}

[b-93v1axinu9] .edit-modal-body .form-control,
[b-93v1axinu9] .edit-modal-body .form-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

[b-93v1axinu9] .edit-modal-body textarea.form-control {
    min-height: 50px;
    resize: vertical;
}

[b-93v1axinu9] .edit-modal-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e2e8f0;
}

[b-93v1axinu9] .edit-modal-footer .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

[b-93v1axinu9] .edit-modal-body .input-group .btn {
    padding: 0.5rem;
}
/* /Pages/Facturation.razor.rz.scp.css */
.fac-page[b-r01sgdwygk] {
    min-height: 100vh;
    background: var(--ds-bg-app);
    padding: 18px 20px 40px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ds-text);
}

.fac-header[b-r01sgdwygk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ds-border);
}

.fac-header-left[b-r01sgdwygk] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.fac-icon[b-r01sgdwygk] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #34d399;
    font-size: 22px;
}

.fac-header h1[b-r01sgdwygk] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
}

.fac-sub[b-r01sgdwygk] {
    margin: 4px 0 0;
    font-size: 12px;
    color: #64748b;
}

.fac-btn-refresh[b-r01sgdwygk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--ds-border);
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.fac-btn-refresh:disabled[b-r01sgdwygk] {
    opacity: 0.6;
    cursor: wait;
}

.fac-filters[b-r01sgdwygk] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: flex-end;
    margin-bottom: 18px;
    padding: 16px;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
}

.fac-filter-group label[b-r01sgdwygk] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 6px;
}

.fac-select[b-r01sgdwygk],
.fac-input[b-r01sgdwygk] {
    min-width: 160px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    background: var(--ds-bg-app);
    color: var(--ds-text);
    font-size: 13px;
}

.fac-preset-btns[b-r01sgdwygk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fac-preset[b-r01sgdwygk] {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.fac-preset.active[b-r01sgdwygk] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
}

.fac-alert[b-r01sgdwygk] {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
}

.fac-alert-error[b-r01sgdwygk] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.fac-alert-warn[b-r01sgdwygk] {
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #fdba74;
}

.fac-loading[b-r01sgdwygk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px;
    justify-content: center;
    color: #64748b;
}

.fac-spinner[b-r01sgdwygk] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(16, 185, 129, 0.2);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: fac-spin-b-r01sgdwygk 0.8s linear infinite;
}

@keyframes fac-spin-b-r01sgdwygk {
    to { transform: rotate(360deg); }
}

.fac-spin[b-r01sgdwygk] {
    animation: fac-spin-b-r01sgdwygk 0.8s linear infinite;
}

.fac-meta[b-r01sgdwygk] {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.fac-warn-inline[b-r01sgdwygk] {
    color: #fbbf24;
}

.fac-kpi-grid[b-r01sgdwygk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.fac-kpi[b-r01sgdwygk] {
    border-radius: 14px;
    padding: 16px;
    border: 1.5px solid transparent;
}

.fac-kpi-label[b-r01sgdwygk] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 6px;
}

.fac-kpi-value[b-r01sgdwygk] {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.1;
}

.fac-kpi-value small[b-r01sgdwygk] {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.8;
}

.fac-kpi-value-sm[b-r01sgdwygk] {
    font-size: 1.25rem;
}

.fac-kpi-hint[b-r01sgdwygk] {
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
}

.fac-kpi-green[b-r01sgdwygk] { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #34d399; }
.fac-kpi-red[b-r01sgdwygk] { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); color: #f87171; }
.fac-kpi-emerald[b-r01sgdwygk] { background: rgba(5, 150, 105, 0.15); border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.fac-kpi-orange[b-r01sgdwygk] { background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.3); color: #fdba74; }
.fac-kpi-teal[b-r01sgdwygk] { background: rgba(20, 184, 166, 0.1); border-color: rgba(20, 184, 166, 0.3); color: #5eead4; }
.fac-kpi-muted[b-r01sgdwygk] { background: var(--ds-bg-elevated); border-color: var(--ds-border); color: var(--ds-text); }

.fac-panel[b-r01sgdwygk] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
}

.fac-panel h2[b-r01sgdwygk] {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fac-empty[b-r01sgdwygk] {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}

.fac-table-wrap[b-r01sgdwygk] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
}

.fac-table[b-r01sgdwygk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 720px;
}

.fac-table th[b-r01sgdwygk] {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(16, 185, 129, 0.1);
    color: var(--ds-text);
    white-space: nowrap;
}

.fac-table td[b-r01sgdwygk] {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fac-table tbody tr[b-r01sgdwygk] {
    cursor: pointer;
}

.fac-table tbody tr:hover[b-r01sgdwygk] {
    background: rgba(255, 255, 255, 0.03);
}

.fac-row-active[b-r01sgdwygk] {
    background: rgba(16, 185, 129, 0.08) !important;
}

.fac-tfoot td[b-r01sgdwygk] {
    font-weight: 800;
    background: rgba(0, 0, 0, 0.15);
    border-top: 2px solid var(--ds-border);
}

.fac-agent[b-r01sgdwygk] {
    font-weight: 700;
}

.fac-num-ok[b-r01sgdwygk] { color: #4ade80; }
.fac-num-warn[b-r01sgdwygk] { color: #f87171; }

.fac-money[b-r01sgdwygk] {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.fac-money-fee[b-r01sgdwygk] { color: #f87171; }
.fac-money-net[b-r01sgdwygk] { color: #34d399; }

.fac-table-detail tbody tr[b-r01sgdwygk] {
    cursor: default;
}

.fac-date[b-r01sgdwygk],
.fac-suivi[b-r01sgdwygk] {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}

.fac-status[b-r01sgdwygk] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.fac-st-livre[b-r01sgdwygk] { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.fac-st-bad[b-r01sgdwygk] { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.fac-st-prep[b-r01sgdwygk] { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.fac-st-default[b-r01sgdwygk] { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

.fac-badge-warn[b-r01sgdwygk] {
    display: inline-flex;
    margin-left: 4px;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    font-size: 10px;
    font-weight: 800;
}
/* /Pages/HistoriqueVentes.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   HISTORIQUE VENTES — Dark POS style, WhatsApp palette
═══════════════════════════════════════════════════════════════ */

/* ── Header helpers ─────────────────────────────────────────── */
.hv-total-badge[b-447f8l2qdg] {
    color: #00a884;
    font-weight: 700;
}

/* ── Filters bar ────────────────────────────────────────────── */
.hv-filters-bar[b-447f8l2qdg] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    padding: 14px 16px;
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    margin-bottom: 16px;
    animation: hvFadeIn-b-447f8l2qdg .3s ease;
}

.hv-filter-group[b-447f8l2qdg] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hv-filter-label[b-447f8l2qdg] {
    font-size: .68rem;
    font-weight: 700;
    color: var(--ds-text-sub);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hv-select[b-447f8l2qdg] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    color: var(--ds-text);
    font-size: .82rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--ds-radius);
    outline: none;
    cursor: pointer;
    transition: border-color 150ms;
    min-width: 160px;
}

.hv-select:focus[b-447f8l2qdg] { border-color: var(--ds-accent); }
.hv-select-sm[b-447f8l2qdg]    { min-width: 110px; }

.hv-period-pills[b-447f8l2qdg] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.hv-pill[b-447f8l2qdg] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-sub);
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 150ms ease;
}

.hv-pill:hover[b-447f8l2qdg]  { border-color: var(--ds-accent); color: var(--ds-text); }
.hv-pill.active[b-447f8l2qdg] { background: rgba(0,168,132,.15); border-color: #00a884; color: #00a884; }

.hv-filter-group--period[b-447f8l2qdg] {
    min-width: min(100%, 280px);
}

.hv-agenda-dates[b-447f8l2qdg] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 8px;
}

.hv-agenda-field[b-447f8l2qdg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hv-agenda-lbl[b-447f8l2qdg] {
    font-size: .65rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hv-date-input[b-447f8l2qdg] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    color: var(--ds-text);
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--ds-radius);
    outline: none;
    min-height: 34px;
    cursor: pointer;
    transition: border-color 150ms;
}

.hv-date-input:focus[b-447f8l2qdg] {
    border-color: var(--ds-accent);
}

.hv-refresh-btn[b-447f8l2qdg] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-sub);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 150ms;
    flex-shrink: 0;
    align-self: flex-end;
}

.hv-refresh-btn:hover[b-447f8l2qdg] { border-color: var(--ds-accent); color: var(--ds-accent); }
.hv-spin[b-447f8l2qdg] { animation: hvSpin-b-447f8l2qdg .7s linear infinite; }

/* ── Summary cards ──────────────────────────────────────────── */
.hv-summary-row[b-447f8l2qdg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    animation: hvFadeIn-b-447f8l2qdg .3s ease;
}

.hv-summary-card[b-447f8l2qdg] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hv-summary-card i[b-447f8l2qdg]    { font-size: 1.2rem; margin-bottom: 2px; }
.hv-summary-card.green i[b-447f8l2qdg] { color: #00a884; }
.hv-summary-card.blue  i[b-447f8l2qdg] { color: #53bdeb; }
.hv-summary-card.teal  i[b-447f8l2qdg] { color: #2dd4bf; }
.hv-summary-card.yellow i[b-447f8l2qdg]{ color: #ffd426; }

.hv-sum-val[b-447f8l2qdg] { font-size: 1.1rem; font-weight: 800; color: var(--ds-text); }
.hv-sum-lbl[b-447f8l2qdg] { font-size: .68rem; color: var(--ds-text-sub); text-transform: uppercase; letter-spacing: .04em; }

/* ── Loading / empty ────────────────────────────────────────── */
.hv-loading[b-447f8l2qdg], .hv-empty[b-447f8l2qdg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
    color: var(--ds-text-sub);
}

.hv-spinner[b-447f8l2qdg] {
    width: 32px; height: 32px;
    border: 3px solid var(--ds-border);
    border-top-color: var(--ds-accent);
    border-radius: 50%;
    animation: hvSpin-b-447f8l2qdg .8s linear infinite;
}

.hv-empty-title[b-447f8l2qdg] { font-size: 1rem; font-weight: 700; color: var(--ds-text); }
.hv-empty-sub[b-447f8l2qdg]   { font-size: .82rem; max-width: 300px; }

/* ── Transaction list ───────────────────────────────────────── */
.hv-list[b-447f8l2qdg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hv-card[b-447f8l2qdg] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 160ms, box-shadow 160ms;
    animation: hvFadeIn-b-447f8l2qdg .25s ease both;
}

.hv-card:hover[b-447f8l2qdg]        { border-color: rgba(0,168,132,.4); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.hv-card.cancelled[b-447f8l2qdg]    { opacity: .6; }
.hv-card.cancelled:hover[b-447f8l2qdg] { border-color: rgba(239,68,68,.4); }

.hv-card-top[b-447f8l2qdg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
}

.hv-card-left[b-447f8l2qdg]  { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.hv-card-right[b-447f8l2qdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hv-receipt-no[b-447f8l2qdg] {
    font-size: .78rem;
    font-weight: 800;
    color: var(--ds-text);
    letter-spacing: .04em;
}

.hv-tx-meta[b-447f8l2qdg] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hv-meta-item[b-447f8l2qdg] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    color: var(--ds-text-sub);
}

.hv-tx-total[b-447f8l2qdg] {
    font-size: .95rem;
    font-weight: 800;
    color: #00a884;
}

.hv-pay-badge[b-447f8l2qdg] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.hv-pay-badge.cash[b-447f8l2qdg]     { background: rgba(0,168,132,.12); border-color: rgba(0,168,132,.25); color: #00a884; }
.hv-pay-badge.card[b-447f8l2qdg]     { background: rgba(83,189,235,.12); border-color: rgba(83,189,235,.25); color: #53bdeb; }
.hv-pay-badge.transfer[b-447f8l2qdg] { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.25); color: #a78bfa; }

.hv-status-badge[b-447f8l2qdg] {
    font-size: .65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hv-status-badge.completed[b-447f8l2qdg] { background: rgba(0,168,132,.15); color: #00a884; }
.hv-status-badge.cancelled[b-447f8l2qdg] { background: rgba(239,68,68,.15); color: #ef4444; }
.hv-status-badge.pending[b-447f8l2qdg]   { background: rgba(255,212,38,.15); color: #ffd426; }

.hv-chevron[b-447f8l2qdg] {
    color: var(--ds-text-sub);
    font-size: .75rem;
    transition: transform 150ms;
}

/* ── Customer row ────────────────────────────────────────────── */
.hv-customer-row[b-447f8l2qdg] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px 8px;
    font-size: .75rem;
    color: var(--ds-text-sub);
    border-top: 1px solid var(--ds-border);
}

.hv-cust-phone[b-447f8l2qdg] { opacity: .7; }

/* ── Expanded details ────────────────────────────────────────── */
.hv-details[b-447f8l2qdg] {
    border-top: 1px solid var(--ds-border);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--ds-bg-elevated);
    animation: hvSlideDown-b-447f8l2qdg .2s ease;
}

.hv-lines-header[b-447f8l2qdg] {
    display: grid;
    grid-template-columns: 1fr 50px 70px 70px;
    gap: 8px;
    font-size: .65rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ds-border);
}

.hv-line[b-447f8l2qdg] {
    display: grid;
    grid-template-columns: 1fr 50px 70px 70px;
    gap: 8px;
    align-items: center;
    font-size: .78rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--ds-border);
}

.hv-line:last-of-type[b-447f8l2qdg] { border-bottom: none; }

.hv-line-name[b-447f8l2qdg] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ds-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hv-line-name i[b-447f8l2qdg] { color: var(--ds-text-sub); font-size: .8rem; flex-shrink: 0; }

.hv-line-val[b-447f8l2qdg] { text-align: right; font-weight: 600; color: var(--ds-text-sub); }
.hv-line-val.green[b-447f8l2qdg] { color: #00a884; }
.hv-line-val.muted[b-447f8l2qdg] { color: var(--ds-text-muted); }

/* ── Detail totals ───────────────────────────────────────────── */
.hv-detail-totals[b-447f8l2qdg] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ds-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hv-d-row[b-447f8l2qdg] {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--ds-text-sub);
    padding: 2px 0;
}

.hv-d-row.discount[b-447f8l2qdg] { color: #f15c7e; }
.hv-d-row.total[b-447f8l2qdg]    { font-size: .88rem; font-weight: 800; color: #00a884; border-top: 1px solid var(--ds-border); padding-top: 6px; margin-top: 2px; }
.hv-d-row.teal[b-447f8l2qdg]     { color: #2dd4bf; }

/* ── Detail actions ──────────────────────────────────────────── */
.hv-detail-actions[b-447f8l2qdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ds-border);
}

.hv-session-tag[b-447f8l2qdg] {
    font-size: .68rem;
    color: var(--ds-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: monospace;
}

.hv-cancel-btn[b-447f8l2qdg] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    color: #ef4444;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    transition: all 150ms;
}

.hv-cancel-btn:hover[b-447f8l2qdg] { background: rgba(239,68,68,.2); }

.hv-print-btn[b-447f8l2qdg] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    background: rgba(249,115,22,.1);
    border: 1px solid rgba(249,115,22,.3);
    color: #f97316;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    transition: all 150ms;
}
.hv-print-btn:hover[b-447f8l2qdg] {
    background: rgba(249,115,22,.2);
    border-color: #f97316;
}

/* ── Modal ───────────────────────────────────────────────────── */
.hv-overlay[b-447f8l2qdg] {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: hvFadeIn-b-447f8l2qdg .2s ease;
}

.hv-modal[b-447f8l2qdg] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    animation: hvModalIn-b-447f8l2qdg .25s ease;
}

.hv-modal-header[b-447f8l2qdg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-border);
    font-size: .85rem;
    font-weight: 700;
    color: var(--ds-text);
    gap: 10px;
}

.hv-modal-close[b-447f8l2qdg] {
    background: none; border: none;
    color: var(--ds-text-sub); font-size: 1rem;
    cursor: pointer; transition: color 150ms;
}

.hv-modal-close:hover[b-447f8l2qdg] { color: #ef4444; }

.hv-modal-body[b-447f8l2qdg] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hv-modal-footer[b-447f8l2qdg] {
    padding: 12px 16px;
    border-top: 1px solid var(--ds-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.hv-confirm-text[b-447f8l2qdg] {
    font-size: .85rem;
    color: var(--ds-text);
    line-height: 1.5;
}

.hv-confirm-warning[b-447f8l2qdg] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 8px;
    font-size: .78rem;
    color: #ef4444;
}

/* ── Danger button variant (local) ──────────────────────────── */
.ds-btn-danger[b-447f8l2qdg] {
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.3);
    color: #ef4444;
}
.ds-btn-danger:hover[b-447f8l2qdg] { background: rgba(239,68,68,.22); }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes hvFadeIn-b-447f8l2qdg    { from { opacity: 0; } to { opacity: 1; } }
@keyframes hvSlideDown-b-447f8l2qdg { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 800px; } }
@keyframes hvModalIn-b-447f8l2qdg   { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes hvSpin-b-447f8l2qdg      { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .hv-filters-bar[b-447f8l2qdg] { flex-direction: column; align-items: stretch; }
    .hv-lines-header[b-447f8l2qdg],
    .hv-line[b-447f8l2qdg] { grid-template-columns: 1fr 40px 65px; }
    .hv-line-val:nth-child(3)[b-447f8l2qdg] { display: none; }
    .hv-lines-header span:nth-child(3)[b-447f8l2qdg] { display: none; }
    .hv-card-right[b-447f8l2qdg] { flex-wrap: wrap; }
}
/* /Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   TABLEAU DE BORD — VOLCHIC CRM
   Premium SaaS Dark Theme · Unified with Design System v3.0
   ═══════════════════════════════════════════════════════════════════ */

/* ── Local tokens (bridge to design-system.css :root) ──────────── */
:root[b-dhnt2e86ea] {
    /* Brand — orange & blanc cassé */
    --db-brand:       #f97316;
    --db-brand-d:     #c2410c;
    --db-brand-dim:   rgba(249,115,22,.13);
    --db-brand-glow:  rgba(249,115,22,.28);

    /* Semantic palette (mirrors ds-* intent) */
    --db-green:       #22c55e;
    --db-blue:        #fb923c;
    --db-purple:      #fdba74;
    --db-pink:        #fb7185;
    --db-yellow:      #fbbf24;
    --db-orange:      #ea580c;
    --db-red:         #f87171;
    --db-teal:        #fdba74;

    /* Surface mapping — pull from design-system tokens */
    --db-bg:          var(--ds-bg-app);
    --db-panel:       var(--ds-bg-surface);
    --db-surface:     var(--ds-bg-elevated);
    --db-border:      var(--ds-border);
    --db-text:        var(--ds-text);
    --db-sub:         var(--ds-text-sub);
    --db-muted:       var(--ds-text-muted);

    /* Geometry */
    --db-radius:      var(--ds-radius-lg);
    --db-radius-sm:   var(--ds-radius-sm);
    --db-tr:          var(--ds-duration) var(--ds-ease);
    --db-shadow:      var(--ds-shadow);
    --db-shadow-sm:   var(--ds-shadow-sm);
    --db-shadow-hover:0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}

/* ══════════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════════ */
.db-header[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--db-panel);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    box-shadow: var(--db-shadow-sm);
    position: relative;
    overflow: hidden;
    animation: dbFadeIn-b-dhnt2e86ea .3s var(--ds-ease) both;
}

/* Subtle gradient accent line at top */
.db-header[b-dhnt2e86ea]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--db-brand), var(--db-orange), var(--db-purple));
    border-radius: var(--db-radius) var(--db-radius) 0 0;
}

.db-greeting-block[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.db-greeting-icon[b-dhnt2e86ea] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--db-brand-d), var(--db-brand));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px var(--db-brand-glow);
}

.db-greeting-main[b-dhnt2e86ea] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--db-text);
    letter-spacing: -.01em;
}

.db-greeting-main strong[b-dhnt2e86ea] {
    color: var(--db-brand);
    font-weight: 700;
}

.db-greeting-date[b-dhnt2e86ea] {
    font-size: .78rem;
    color: var(--db-sub);
    margin-top: 3px;
    text-transform: capitalize;
    letter-spacing: .01em;
}

.db-header-actions[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Period filter select — beautiful custom dropdown ────────── */
.db-select[b-dhnt2e86ea] {
    padding: .44rem 2.4rem .44rem .9rem;
    background: var(--db-surface);
    border: 1.5px solid var(--db-border);
    border-radius: var(--ds-radius-full);
    color: var(--db-text);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    letter-spacing: .01em;
    transition: border-color var(--db-tr), box-shadow var(--db-tr), background var(--db-tr), transform var(--db-tr);

    /* remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* custom teal chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300c49a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
.db-select:hover[b-dhnt2e86ea] {
    border-color: var(--db-brand);
    background-color: var(--db-brand-dim);
    transform: translateY(-1px);
}
.db-select:focus[b-dhnt2e86ea] {
    border-color: var(--db-brand);
    box-shadow: 0 0 0 3px var(--db-brand-dim);
}
.db-select option[b-dhnt2e86ea] {
    background: var(--db-panel);
    color: var(--db-text);
    font-weight: 500;
    padding: 6px 10px;
}

.db-hbtn[b-dhnt2e86ea] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .5rem 1.1rem;
    border-radius: var(--ds-radius-full);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--db-tr);
    cursor: pointer;
    letter-spacing: .01em;
    white-space: nowrap;
}

.db-hbtn-ghost[b-dhnt2e86ea] {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    color: var(--db-sub);
}

.db-hbtn-ghost:hover[b-dhnt2e86ea] {
    background: var(--db-brand-dim);
    border-color: var(--db-brand);
    color: var(--db-brand);
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.db-hbtn-accent[b-dhnt2e86ea] {
    background: var(--db-brand);
    border: 1px solid var(--db-brand);
    color: #fff;
    box-shadow: 0 2px 10px var(--db-brand-glow);
}

.db-hbtn-accent:hover[b-dhnt2e86ea] {
    background: #00d9aa;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--db-brand-glow);
    text-decoration: none;
    color: #fff;
}

.db-sup[b-dhnt2e86ea] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--db-pink);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    vertical-align: top;
    margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   KPI ROW
══════════════════════════════════════════════════════════════════ */
.db-kpi-row[b-dhnt2e86ea] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.db-kpi[b-dhnt2e86ea] {
    background: var(--db-panel);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    padding: 20px 18px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform var(--db-tr), box-shadow var(--db-tr), border-color var(--db-tr);
    animation: dbSlideUp-b-dhnt2e86ea .4s var(--ds-ease) both;
    position: relative;
    overflow: hidden;
}

/* Colored top accent bar */
.db-kpi[b-dhnt2e86ea]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--db-radius) var(--db-radius) 0 0;
    transition: opacity var(--db-tr);
}

.db-kpi-green[b-dhnt2e86ea]::before  { background: linear-gradient(90deg, var(--db-brand-d), var(--db-brand)); }
.db-kpi-blue[b-dhnt2e86ea]::before   { background: linear-gradient(90deg, #1a5fb4, var(--db-blue)); }
.db-kpi-yellow[b-dhnt2e86ea]::before { background: linear-gradient(90deg, #c98000, var(--db-yellow)); }
.db-kpi-purple[b-dhnt2e86ea]::before { background: linear-gradient(90deg, #6d37c7, var(--db-purple)); }
.db-kpi-teal[b-dhnt2e86ea]::before   { background: linear-gradient(90deg, #0d7a70, var(--db-teal)); }
.db-kpi-red[b-dhnt2e86ea]::before    { background: linear-gradient(90deg, #b91c1c, var(--db-red)); }
.db-kpi-rose[b-dhnt2e86ea]::before   { background: linear-gradient(90deg, #9f1239, #f43f5e); }
.db-kpi-muted[b-dhnt2e86ea]::before  { background: var(--db-border); opacity: .5; }

.db-kpi:hover[b-dhnt2e86ea] {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--db-shadow-hover);
    border-color: rgba(255,255,255,.15);
}

.db-kpi-green:hover[b-dhnt2e86ea]  { border-color: rgba(0,196,154,.25); }
.db-kpi-blue:hover[b-dhnt2e86ea]   { border-color: rgba(77,156,255,.25); }
.db-kpi-yellow:hover[b-dhnt2e86ea] { border-color: rgba(240,180,41,.25); }
.db-kpi-purple:hover[b-dhnt2e86ea] { border-color: rgba(167,139,250,.25); }
.db-kpi-teal:hover[b-dhnt2e86ea]   { border-color: rgba(45,212,191,.25); }
.db-kpi-red:hover[b-dhnt2e86ea]    { border-color: rgba(248,113,113,.25); }
.db-kpi-rose:hover[b-dhnt2e86ea]   { border-color: rgba(244,63,94,.25); }

/* Icon wrappers */
.db-kpi-icon-wrap[b-dhnt2e86ea] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.db-kpi-icon-wrap.green[b-dhnt2e86ea]  { background: var(--db-brand-dim);                color: var(--db-brand); }
.db-kpi-icon-wrap.blue[b-dhnt2e86ea]   { background: rgba(77,156,255,.14);                color: var(--db-blue); }
.db-kpi-icon-wrap.yellow[b-dhnt2e86ea] { background: rgba(240,180,41,.14);                color: var(--db-yellow); }
.db-kpi-icon-wrap.purple[b-dhnt2e86ea] { background: rgba(167,139,250,.14);               color: var(--db-purple); }
.db-kpi-icon-wrap.teal[b-dhnt2e86ea]   { background: rgba(45,212,191,.14);                color: var(--db-teal); }
.db-kpi-icon-wrap.red[b-dhnt2e86ea]    { background: rgba(248,113,113,.14);               color: var(--db-red); }
.db-kpi-icon-wrap.rose[b-dhnt2e86ea]   { background: rgba(244,63,94,.14);                 color: #f43f5e; }
.db-kpi-icon-wrap.muted[b-dhnt2e86ea]  { background: rgba(255,255,255,.06);               color: var(--db-sub); }

.db-kpi-body[b-dhnt2e86ea] { flex: 1; min-width: 0; }

.db-kpi-label[b-dhnt2e86ea] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--db-sub);
    margin-bottom: 6px;
}

.db-kpi-value[b-dhnt2e86ea] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--db-text);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.db-kpi-unit[b-dhnt2e86ea] {
    font-size: .78rem;
    font-weight: 500;
    color: var(--db-sub);
    letter-spacing: 0;
}

.db-kpi-sub[b-dhnt2e86ea] {
    font-size: .72rem;
    color: var(--db-sub);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* ── Dot indicators ──────────────────────────────────────────────── */
.db-dot[b-dhnt2e86ea] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.db-dot.green[b-dhnt2e86ea]  { background: var(--db-brand);  box-shadow: 0 0 6px var(--db-brand-glow); }
.db-dot.yellow[b-dhnt2e86ea] { background: var(--db-yellow); }
.db-dot.red[b-dhnt2e86ea]    { background: var(--db-red);    box-shadow: 0 0 6px rgba(248,113,113,.4); animation: dbPulse-b-dhnt2e86ea 1.4s infinite; }
.db-dot.blue[b-dhnt2e86ea]   { background: var(--db-blue); }

.db-dot-sm[b-dhnt2e86ea] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 4px;
}

.db-dot-sm.blue[b-dhnt2e86ea]  { background: var(--db-blue); }
.db-dot-sm.pink[b-dhnt2e86ea]  { background: var(--db-pink); }
.db-dot-sm.teal[b-dhnt2e86ea]  { background: var(--db-teal); }
.db-dot-sm.green[b-dhnt2e86ea] { background: var(--db-brand); }

/* ══════════════════════════════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════════════════════════════ */
.db-main-row[b-dhnt2e86ea] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

.db-col-wide[b-dhnt2e86ea],
.db-col-narrow[b-dhnt2e86ea] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════════════ */
.db-card[b-dhnt2e86ea] {
    background: var(--db-panel);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius);
    overflow: hidden;
    box-shadow: var(--db-shadow-sm);
    animation: dbFadeIn-b-dhnt2e86ea .4s var(--ds-ease) both;
    transition: box-shadow var(--db-tr), border-color var(--db-tr);
}

.db-card:hover[b-dhnt2e86ea] {
    box-shadow: 0 6px 28px rgba(0,0,0,.38);
    border-color: rgba(255,255,255,.1);
}

.db-mt[b-dhnt2e86ea]    { margin-top: 20px; }
.db-mt-sm[b-dhnt2e86ea] { margin-top: 14px; }

.db-card-head[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--db-border);
    background: var(--db-panel);
}

.db-card-title[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--db-text);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.db-card-body[b-dhnt2e86ea] {
    padding: 16px 20px;
}

.db-p0[b-dhnt2e86ea] { padding: 0 !important; }

/* ── Links ──────────────────────────────────────────────────────── */
.db-link[b-dhnt2e86ea] {
    color: var(--db-brand);
    text-decoration: none;
    font-size: .73rem;
    font-weight: 600;
    transition: color var(--db-tr);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.db-link:hover[b-dhnt2e86ea] { color: #00d9aa; text-decoration: none; }

.db-link-xs[b-dhnt2e86ea] {
    color: var(--db-sub);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
    transition: color var(--db-tr);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.db-link-xs:hover[b-dhnt2e86ea] { color: var(--db-brand); text-decoration: none; }

/* ── Badges ──────────────────────────────────────────────────────── */
.db-badge-small[b-dhnt2e86ea] {
    font-size: .62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .04em;
}

.db-badge-small.red[b-dhnt2e86ea]    { background: rgba(248,113,113,.15); color: var(--db-red); }
.db-badge-small.yellow[b-dhnt2e86ea] { background: rgba(240,180,41,.15);  color: var(--db-yellow); }
.db-badge-small.blue[b-dhnt2e86ea]   { background: rgba(77,156,255,.14);  color: var(--db-blue); }
.db-badge-small.green[b-dhnt2e86ea]  { background: var(--db-brand-dim);   color: var(--db-brand); }

.db-badge-type[b-dhnt2e86ea] {
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.db-badge-type.green[b-dhnt2e86ea]  { background: var(--db-brand-dim);               color: var(--db-brand); }
.db-badge-type.blue[b-dhnt2e86ea]   { background: rgba(77,156,255,.14);              color: var(--db-blue); }
.db-badge-type.yellow[b-dhnt2e86ea] { background: rgba(240,180,41,.14);              color: var(--db-yellow); }

/* ══════════════════════════════════════════════════════════════════
   BAR CHART
══════════════════════════════════════════════════════════════════ */
.db-bars[b-dhnt2e86ea] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.db-bar-row[b-dhnt2e86ea] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 5px 10px;
    animation: dbSlideUp-b-dhnt2e86ea .3s var(--ds-ease) both;
}

.db-bar-meta[b-dhnt2e86ea] {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--db-text);
}

.db-bar-name[b-dhnt2e86ea] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.db-bar-qty[b-dhnt2e86ea]  { color: var(--db-sub); font-size: .7rem; flex-shrink: 0; }

.db-bar-track[b-dhnt2e86ea] {
    grid-column: 1;
    height: 7px;
    background: rgba(255,255,255,.06);
    border-radius: 99px;
    overflow: hidden;
}

.db-bar-track.sm[b-dhnt2e86ea] { height: 5px; }

.db-bar-fill[b-dhnt2e86ea] {
    height: 100%;
    border-radius: 99px;
    transition: width .65s cubic-bezier(.4,0,.2,1);
}

.db-bar-fill.green[b-dhnt2e86ea] { background: linear-gradient(90deg, var(--db-brand-d), var(--db-brand)); }
.db-bar-fill.blue[b-dhnt2e86ea]  { background: linear-gradient(90deg, #1a5fb4, var(--db-blue)); }
.db-bar-fill.pink[b-dhnt2e86ea]  { background: linear-gradient(90deg, #9d174d, var(--db-pink)); }
.db-bar-fill.teal[b-dhnt2e86ea]  { background: linear-gradient(90deg, #0d7a70, var(--db-teal)); }

.db-bar-amount[b-dhnt2e86ea] {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--db-brand);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════
   GENRE DISTRIBUTION BARS
══════════════════════════════════════════════════════════════════ */
.db-genre-bars[b-dhnt2e86ea] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.db-genre-row[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.db-genre-lbl[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    color: var(--db-sub);
    width: 72px;
    flex-shrink: 0;
    font-weight: 500;
}

.db-genre-num[b-dhnt2e86ea] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--db-text);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.db-genre-pct[b-dhnt2e86ea] {
    font-size: .7rem;
    color: var(--db-sub);
    width: 36px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   HEALTH ROW (mini stats strip)
══════════════════════════════════════════════════════════════════ */
.db-health-row[b-dhnt2e86ea] {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--db-surface);
    border-radius: var(--db-radius-sm);
    overflow: hidden;
    border: 1px solid var(--db-border);
}

.db-health-item[b-dhnt2e86ea] {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
}

.db-health-divider[b-dhnt2e86ea] {
    width: 1px;
    background: var(--db-border);
    flex-shrink: 0;
}

.db-health-val[b-dhnt2e86ea] {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.db-health-val.green[b-dhnt2e86ea]  { color: var(--db-brand); }
.db-health-val.yellow[b-dhnt2e86ea] { color: var(--db-yellow); }
.db-health-val.red[b-dhnt2e86ea]    { color: var(--db-red); }
.db-health-val.blue[b-dhnt2e86ea]   { color: var(--db-blue); }
.db-health-val.muted[b-dhnt2e86ea]  { color: var(--db-sub); }

.db-health-lbl[b-dhnt2e86ea] {
    font-size: .62rem;
    color: var(--db-sub);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   ALERT ROWS
══════════════════════════════════════════════════════════════════ */
.db-alert-row[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--db-border);
    transition: background var(--db-tr);
    animation: dbSlideUp-b-dhnt2e86ea .3s var(--ds-ease) both;
}

.db-alert-row:last-child[b-dhnt2e86ea] { border-bottom: none; }

.db-alert-row:hover[b-dhnt2e86ea] {
    background: rgba(255,255,255,.03);
}

.db-alert-icon-wrap[b-dhnt2e86ea] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.db-alert-icon-wrap.red[b-dhnt2e86ea]    { background: rgba(248,113,113,.14); color: var(--db-red); }
.db-alert-icon-wrap.orange[b-dhnt2e86ea] { background: rgba(251,146,60,.14);  color: var(--db-orange); }
.db-alert-icon-wrap.yellow[b-dhnt2e86ea] { background: rgba(240,180,41,.14);  color: var(--db-yellow); }
.db-alert-icon-wrap.blue[b-dhnt2e86ea]   { background: rgba(77,156,255,.14);  color: var(--db-blue); }

.db-alert-text[b-dhnt2e86ea] { flex: 1; min-width: 0; }

.db-alert-title[b-dhnt2e86ea] {
    font-size: .81rem;
    font-weight: 600;
    color: var(--db-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-alert-sub[b-dhnt2e86ea] {
    font-size: .7rem;
    color: var(--db-sub);
    margin-top: 2px;
}

.db-alert-arrow[b-dhnt2e86ea] {
    color: var(--db-sub);
    text-decoration: none;
    font-size: .9rem;
    flex-shrink: 0;
    padding: 5px 7px;
    border-radius: 7px;
    transition: all var(--db-tr);
}

.db-alert-arrow:hover[b-dhnt2e86ea] {
    color: var(--db-brand);
    background: var(--db-brand-dim);
    text-decoration: none;
}

/* Left accent borders */
.db-alert-red[b-dhnt2e86ea]    { border-left: 3px solid var(--db-red); }
.db-alert-orange[b-dhnt2e86ea] { border-left: 3px solid var(--db-orange); }
.db-alert-yellow[b-dhnt2e86ea] { border-left: 3px solid var(--db-yellow); }
.db-alert-blue[b-dhnt2e86ea]   { border-left: 3px solid var(--db-blue); }

/* ══════════════════════════════════════════════════════════════════
   RUPTURE ROWS
══════════════════════════════════════════════════════════════════ */
.db-rupture-row[b-dhnt2e86ea] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--db-border);
    transition: background var(--db-tr);
    animation: dbSlideUp-b-dhnt2e86ea .3s var(--ds-ease) both;
}

.db-rupture-row:last-child[b-dhnt2e86ea] { border-bottom: none; }

.db-rupture-row:hover[b-dhnt2e86ea] {
    background: rgba(255,255,255,.03);
}

.db-rupture-name[b-dhnt2e86ea] {
    flex: 1;
    font-size: .81rem;
    font-weight: 500;
    color: var(--db-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   QUICK ACCESS GRID
══════════════════════════════════════════════════════════════════ */
.db-quick-grid[b-dhnt2e86ea] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 9px;
}

.db-quick[b-dhnt2e86ea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 15px 8px;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-radius-sm);
    color: var(--db-sub);
    font-size: .7rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all var(--db-tr);
    position: relative;
}

.db-quick i[b-dhnt2e86ea] {
    font-size: 19px;
    color: var(--db-brand);
    transition: transform var(--db-tr);
}

.db-quick span[b-dhnt2e86ea] {
    line-height: 1.3;
}

.db-quick:hover[b-dhnt2e86ea] {
    background: var(--db-brand-dim);
    border-color: var(--db-brand);
    color: var(--db-text);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.32);
}

.db-quick:hover i[b-dhnt2e86ea] {
    transform: scale(1.18);
}

.db-quick.db-quick-green[b-dhnt2e86ea] {
    border-color: rgba(0,196,154,.3);
    background: rgba(0,196,154,.07);
}

.db-quick.db-quick-green i[b-dhnt2e86ea] { color: var(--db-brand); }

.db-quick.db-quick-pulse i[b-dhnt2e86ea] { color: var(--db-pink); }

.db-quick.db-quick-pulse[b-dhnt2e86ea] {
    border-color: rgba(244,114,182,.3);
    background: rgba(244,114,182,.07);
    animation: dbPulseCard-b-dhnt2e86ea 2s infinite;
}

/* ══════════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════════ */
.db-empty[b-dhnt2e86ea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 20px;
    color: var(--db-sub);
    font-size: .8rem;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════════════ */
@keyframes dbFadeIn-b-dhnt2e86ea {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dbSlideUp-b-dhnt2e86ea {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dbPulse-b-dhnt2e86ea {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

@keyframes dbPulseCard-b-dhnt2e86ea {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244,114,182,0); }
    50%      { box-shadow: 0 0 0 3px rgba(244,114,182,.18); }
}

/* Stagger KPI cards */
.db-kpi:nth-child(1)[b-dhnt2e86ea] { animation-delay: .04s; }
.db-kpi:nth-child(2)[b-dhnt2e86ea] { animation-delay: .08s; }
.db-kpi:nth-child(3)[b-dhnt2e86ea] { animation-delay: .12s; }
.db-kpi:nth-child(4)[b-dhnt2e86ea] { animation-delay: .16s; }
.db-kpi:nth-child(5)[b-dhnt2e86ea] { animation-delay: .20s; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1360px) {
    .db-main-row[b-dhnt2e86ea] { grid-template-columns: 1fr; }
    .db-col-narrow[b-dhnt2e86ea] { order: -1; }
}

@media (max-width: 700px) {
    .db-kpi-row[b-dhnt2e86ea] { grid-template-columns: 1fr 1fr; }
    .db-header[b-dhnt2e86ea]  { flex-direction: column; align-items: flex-start; }
    .db-kpi-value[b-dhnt2e86ea] { font-size: 1.65rem; }
}

@media (max-width: 480px) {
    .db-kpi-row[b-dhnt2e86ea]   { grid-template-columns: 1fr; }
    .db-quick-grid[b-dhnt2e86ea] { grid-template-columns: repeat(3, 1fr); }
    .db-header[b-dhnt2e86ea]    { padding: 16px; }
    .db-card-head[b-dhnt2e86ea], .db-card-body[b-dhnt2e86ea] { padding-left: 14px; padding-right: 14px; }
}

/* Agenda période personnalisée (DateRangePicker) */
.home-dash-header[b-dhnt2e86ea]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00796b, #00c49a, #4d9cff, #a78bfa);
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}

.home-dash-header[b-dhnt2e86ea] {
    overflow: visible;
}

.home-dash-actions[b-dhnt2e86ea] {
    position: relative;
    z-index: 30;
}

.home-period-group[b-dhnt2e86ea] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 3px 4px 3px 6px;
    border-radius: 999px;
    border: 1.5px solid var(--home-input-border);
    background: var(--home-input-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.home-period-dropdown[b-dhnt2e86ea] {
    position: relative;
    display: inline-flex;
}

.home-period-trigger[b-dhnt2e86ea] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--home-select-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    white-space: nowrap;
}

.home-period-chevron[b-dhnt2e86ea] {
    color: #00c49a;
    font-size: 11px;
    flex-shrink: 0;
}

.home-period-trigger:hover[b-dhnt2e86ea],
.home-period-trigger:focus-visible[b-dhnt2e86ea] {
    color: var(--home-heading);
}

.home-period-backdrop[b-dhnt2e86ea] {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: transparent;
}

.home-period-menu[b-dhnt2e86ea] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1050;
    min-width: 200px;
    padding: 6px;
    border-radius: 12px;
    border: 1.5px solid var(--home-input-border);
    background: var(--home-surface);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.home-period-item[b-dhnt2e86ea] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--home-heading);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
}

.home-period-item:hover[b-dhnt2e86ea] {
    background: rgba(0, 196, 154, 0.12);
    color: #5eead4;
}

.home-period-item--active[b-dhnt2e86ea] {
    background: rgba(0, 196, 154, 0.2);
    color: #00c49a;
    font-weight: 700;
}

html[data-theme="light"] .home-period-item:hover[b-dhnt2e86ea] {
    background: rgba(249, 115, 22, 0.12);
    color: #c2410c;
}

html[data-theme="light"] .home-period-item--active[b-dhnt2e86ea] {
    background: rgba(249, 115, 22, 0.16);
    color: #9a3412;
}

.home-period-divider[b-dhnt2e86ea] {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--home-input-border);
    flex-shrink: 0;
}

.home-dash[b-dhnt2e86ea]  .drp--home.drp-root {
    display: inline-flex;
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-trigger {
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--home-select-text);
    padding: 6px 10px 6px 6px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-trigger:hover:not(:disabled) {
    background: rgba(0, 196, 154, 0.08);
    border: none;
    box-shadow: none;
    color: var(--home-heading);
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-trigger-icon {
    color: #00c49a;
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-sep-icon {
    color: var(--home-muted);
    font-size: 10px;
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-chevron {
    color: #00c49a;
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-popover {
    border: 1.5px solid var(--home-input-border);
    background: var(--home-surface);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-month,
.home-dash[b-dhnt2e86ea]  .drp--home .drp-day {
    color: var(--home-heading);
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-nav {
    border-color: var(--home-input-border);
    color: var(--home-muted);
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-nav:hover {
    color: #00c49a;
    border-color: rgba(0, 196, 154, 0.35);
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-quick-btn {
    border-color: rgba(0, 196, 154, 0.28);
    background: rgba(0, 196, 154, 0.1);
    color: #5eead4;
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-day:hover:not(:disabled) {
    background: rgba(0, 196, 154, 0.12);
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-day--today {
    box-shadow: inset 0 0 0 1px rgba(0, 196, 154, 0.55);
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-day--start,
.home-dash[b-dhnt2e86ea]  .drp--home .drp-day--end {
    background: #00c49a;
    color: #003d33;
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-day--in-range {
    background: rgba(0, 196, 154, 0.16);
    color: #99f6e4;
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-btn {
    border-color: var(--home-input-border);
    color: var(--home-muted);
}

.home-dash[b-dhnt2e86ea]  .drp--home .drp-btn--apply {
    background: #00c49a;
    color: #003d33;
}
/* /Pages/Login.razor.rz.scp.css */
/* Page Connexion - style moderne */
.login-page[b-lcd7owv6la] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(160deg, #f0f4ff 0%, #e8eeff 40%, #f8fafc 100%);
}

.login-card[b-lcd7owv6la] {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.login-header[b-lcd7owv6la] {
    padding: 2rem 2rem 1rem;
    text-align: center;
}

.login-icon[b-lcd7owv6la] {
    font-size: 3rem;
    color: #6366f1;
    margin-bottom: 0.75rem;
}

.login-title[b-lcd7owv6la] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.35rem 0;
}

.login-subtitle[b-lcd7owv6la] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

.login-body[b-lcd7owv6la] {
    padding: 1.5rem 2rem 2rem;
}

.login-field[b-lcd7owv6la] {
    margin-bottom: 1.25rem;
}

.login-label[b-lcd7owv6la] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
}

.login-label .bi[b-lcd7owv6la] {
    color: #6366f1;
}

.login-input[b-lcd7owv6la] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fafbfc;
    transition: all 0.2s ease;
}

.login-input:focus[b-lcd7owv6la] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
    background: white;
}

.login-input[b-lcd7owv6la]::placeholder {
    color: #94a3b8;
}

.login-password-wrap[b-lcd7owv6la] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.login-password-wrap .login-input[b-lcd7owv6la] {
    padding-right: 3rem;
}

.login-toggle-password[b-lcd7owv6la] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.login-toggle-password:hover[b-lcd7owv6la] {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.login-toggle-password .bi[b-lcd7owv6la] {
    font-size: 1.2rem;
}

.login-hint[b-lcd7owv6la] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #0369a1;
    display: flex;
    align-items: center;
}

.login-hint strong[b-lcd7owv6la] {
    color: #0c4a6e;
}

.login-error[b-lcd7owv6la] {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.login-btn[b-lcd7owv6la] {
    width: 100%;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.login-btn:hover:not(:disabled)[b-lcd7owv6la] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

.login-btn:disabled[b-lcd7owv6la] {
    opacity: 0.7;
    cursor: not-allowed;
}
/* /Pages/ManagerSupervision.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   SUPERVISION CENTER — Super Admin · Command & Control
   Theme : Deep Void · Imperial Gold · Mission Critical
   Design : premium dark SaaS, authority-first layout
═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens (scoped to page — évite :root + hérite en mode clair via app.css) ── */
.sup-page[b-3vibgc8aps],
.sup-access-denied[b-3vibgc8aps] {
    /* Void backgrounds */
    --s-void:         #04050c;   /* true void — page shell    */
    --s-black:        #07090f;   /* main workspace bg         */
    --s-surface:      #0d0f1c;   /* panels, sidebar, right    */
    --s-elevated:     #131628;   /* inputs, card bg           */
    --s-overlay:      #1a1e35;   /* hover states              */

    /* Borders */
    --s-border:       #1b1e30;   /* subtle                    */
    --s-border-mid:   #252945;   /* visible                   */
    --s-border-vis:   #303560;   /* strong / selected         */

    /* Imperial Gold */
    --s-gold:         #c9a227;
    --s-gold-l:       #f2cc50;   /* bright highlight          */
    --s-gold-pale:    #eddfa8;   /* large text on dark bg     */
    --s-gold-dim:     rgba(201,162,39,.1);
    --s-gold-dim2:    rgba(201,162,39,.18);
    --s-gold-ring:    rgba(201,162,39,.35);
    --s-gold-glow:    rgba(201,162,39,.55);

    /* Semantic */
    --s-danger:       #ff4d4d;
    --s-danger-dim:   rgba(255,77,77,.1);
    --s-danger-ring:  rgba(255,77,77,.3);
    --s-warn:         #ffb347;
    --s-warn-dim:     rgba(255,179,71,.1);
    --s-warn-ring:    rgba(255,179,71,.3);
    --s-success:      #3ddc84;
    --s-success-dim:  rgba(61,220,132,.1);
    --s-success-ring: rgba(61,220,132,.3);
    --s-info:         #79c0ff;
    --s-info-dim:     rgba(121,192,255,.1);

    /* Text */
    --s-text:         #e8e5d8;
    --s-text-sub:     #888899;
    --s-text-dim:     #3a3d58;

    /* Shape */
    --s-radius:       14px;
    --s-radius-sm:    9px;
    --s-radius-xs:    6px;

    /* Motion */
    --s-tr:           160ms cubic-bezier(.4,0,.2,1);
    --s-tr-slow:      280ms cubic-bezier(.4,0,.2,1);
}

/* ── ACCESS DENIED ─────────────────────────────────────────────── */
.sup-access-denied[b-3vibgc8aps] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    gap: 1.2rem;
    background: var(--s-void);
    color: var(--s-text-sub);
}
.sup-access-denied .bi[b-3vibgc8aps]  { font-size: 3.5rem; color: var(--s-danger); }
.sup-access-denied h3[b-3vibgc8aps]   { color: var(--s-text); font-size: 1.4rem; margin: 0; }
.sup-access-denied p[b-3vibgc8aps]    { color: var(--s-text-sub); margin: 0; }
.sup-denied-btn[b-3vibgc8aps] {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.35rem; border-radius: var(--s-radius-sm);
    border: 1px solid var(--s-border-mid);
    background: var(--s-elevated); color: var(--s-text-sub);
    text-decoration: none; font-size: .88rem; font-weight: 600;
    transition: all var(--s-tr);
}
.sup-denied-btn:hover[b-3vibgc8aps] { color: var(--s-gold-l); border-color: var(--s-gold-ring); background: var(--s-gold-dim); }

/* ── PAGE SHELL ────────────────────────────────────────────────── */
.sup-page[b-3vibgc8aps] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 1rem);
    min-height: 0;
    background: var(--s-void);
    color: var(--s-text);
    overflow: hidden;
    font-family: "Inter","Segoe UI",system-ui,sans-serif;
}

/* ════════════════════════════════════════════════════════════════
   HEADER — Command bar: brand · KPIs · tab nav
════════════════════════════════════════════════════════════════ */
.sup-header[b-3vibgc8aps] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1.4rem;
    height: 66px;
    background: var(--s-surface);
    border-bottom: 1px solid var(--s-border-mid);
    flex-shrink: 0;
    /* Gold accent line at very top */
    box-shadow:
        inset 0 1px 0 rgba(201,162,39,.25),
        0 1px 0 rgba(0,0,0,.6),
        0 4px 24px rgba(0,0,0,.5);
    position: relative;
    z-index: 20;
}
.sup-header[b-3vibgc8aps]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--s-gold) 30%, var(--s-gold-l) 50%, var(--s-gold) 70%, transparent 100%);
}

/* Brand */
.sup-header-brand[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .85rem;
    min-width: 210px; flex-shrink: 0;
}
.sup-header-icon[b-3vibgc8aps] {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, #d4aa28, #7a5c0a);
    border-radius: var(--s-radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: #000; font-size: 1.2rem;
    box-shadow: 0 2px 12px var(--s-gold-ring), 0 0 0 1px rgba(201,162,39,.2);
    flex-shrink: 0;
}
.sup-header-title[b-3vibgc8aps] {
    font-size: .88rem; font-weight: 800;
    color: var(--s-gold-l);
    letter-spacing: .08em; text-transform: uppercase;
    text-shadow: 0 0 20px var(--s-gold-ring);
}
.sup-header-sub[b-3vibgc8aps] {
    font-size: .67rem; color: var(--s-text-dim);
    letter-spacing: .03em; margin-top: .1rem;
}

/* KPI row inside header */
.sup-kpi-row[b-3vibgc8aps] {
    display: flex; gap: .55rem;
    flex: 1; justify-content: center;
}
.sup-kpi[b-3vibgc8aps] {
    display: flex; flex-direction: column; align-items: center;
    padding: .45rem 1rem;
    border-radius: var(--s-radius-sm);
    border: 1px solid var(--s-border-mid);
    background: var(--s-elevated);
    min-width: 80px;
    transition: border-color var(--s-tr), box-shadow var(--s-tr);
    position: relative; overflow: hidden;
}
.sup-kpi[b-3vibgc8aps]::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px; border-radius: 0 0 2px 2px;
    opacity: 0; transition: opacity var(--s-tr);
}
.sup-kpi:hover[b-3vibgc8aps] { border-color: var(--s-border-vis); }
.sup-kpi:hover[b-3vibgc8aps]::after { opacity: 1; }

.sup-kpi-val[b-3vibgc8aps]   { font-size: 1.55rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.sup-kpi-label[b-3vibgc8aps] { font-size: .6rem; color: var(--s-text-sub); text-transform: uppercase; letter-spacing: .06em; margin-top: .15rem; }

.sup-kpi-active .sup-kpi-val[b-3vibgc8aps]  { color: var(--s-gold-l); }
.sup-kpi-active[b-3vibgc8aps]::after         { background: var(--s-gold); }
.sup-kpi-unread .sup-kpi-val[b-3vibgc8aps]  { color: var(--s-warn); }
.sup-kpi-unread[b-3vibgc8aps]::after         { background: var(--s-warn); }
.sup-kpi-alert  .sup-kpi-val[b-3vibgc8aps]  { color: var(--s-danger); }
.sup-kpi-alert[b-3vibgc8aps]::after          { background: var(--s-danger); animation: kpi-pulse-b-3vibgc8aps 1.8s ease-in-out infinite; }
.sup-kpi-closed .sup-kpi-val[b-3vibgc8aps]  { color: var(--s-success); }
.sup-kpi-closed[b-3vibgc8aps]::after         { background: var(--s-success); }

@keyframes kpi-pulse-b-3vibgc8aps {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* Header tab buttons */
.sup-header-actions[b-3vibgc8aps] { display: flex; gap: .4rem; flex-shrink: 0; }
.sup-hdr-btn[b-3vibgc8aps] {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .48rem 1rem;
    border-radius: var(--s-radius-sm);
    border: 1px solid var(--s-border-mid);
    background: var(--s-elevated);
    color: var(--s-text-sub);
    font-size: .8rem; font-weight: 600; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: all var(--s-tr);
}
.sup-hdr-btn:hover[b-3vibgc8aps]  { color: var(--s-gold-l); border-color: var(--s-gold-ring); background: var(--s-gold-dim); }
.sup-hdr-btn.active[b-3vibgc8aps] {
    background: linear-gradient(135deg, #c9a227 0%, #9a7010 100%);
    color: #000; border-color: transparent;
    font-weight: 700;
    box-shadow: 0 2px 14px var(--s-gold-ring), 0 1px 0 rgba(255,255,255,.1) inset;
}

/* ════════════════════════════════════════════════════════════════
   MAIN — 3-COLUMN COMMAND LAYOUT
════════════════════════════════════════════════════════════════ */
.sup-main[b-3vibgc8aps] {
    display: grid;
    grid-template-columns: 300px 1fr 290px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   LEFT SIDEBAR — Conversation Intelligence
════════════════════════════════════════════════════════════════ */
.sup-sidebar[b-3vibgc8aps] {
    display: flex;
    flex-direction: column;
    background: var(--s-surface);
    border-right: 1px solid var(--s-border-mid);
    overflow: hidden;
    min-height: 0;
}

.sup-sidebar-header[b-3vibgc8aps] {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.1rem;
    background: var(--s-elevated);
    border-bottom: 1px solid var(--s-border-mid);
    flex-shrink: 0;
}
.sup-sidebar-title[b-3vibgc8aps] {
    font-size: .78rem; font-weight: 800; color: var(--s-text);
    display: flex; align-items: center; gap: .45rem;
    text-transform: uppercase; letter-spacing: .06em;
}
.sup-sidebar-title .bi[b-3vibgc8aps] { color: var(--s-gold); font-size: .85rem; }
.sup-conv-count[b-3vibgc8aps] {
    padding: .12rem .55rem; border-radius: 999px;
    background: var(--s-gold-dim); color: var(--s-gold-l);
    border: 1px solid var(--s-gold-ring);
    font-size: .7rem; font-weight: 700;
}

/* ── Filters ─────────────────────────────────────────────────── */
.sup-filters[b-3vibgc8aps] {
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: var(--s-surface);
    border-bottom: 1px solid var(--s-border);
    flex-shrink: 0;
}

/* Search input — pill style with icon feel */
.sup-search[b-3vibgc8aps] {
    width: 100%;
    padding: .55rem 1rem .55rem 2.2rem;
    background: var(--s-elevated);
    border: 1.5px solid var(--s-border-mid);
    border-radius: 999px;
    color: var(--s-text);
    font-size: .83rem;
    outline: none;
    transition: border-color var(--s-tr), box-shadow var(--s-tr), background var(--s-tr);
    box-sizing: border-box;
    /* search icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233a3d58' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 14px;
}
.sup-search:hover[b-3vibgc8aps] {
    background-color: var(--s-overlay);
    border-color: var(--s-border-vis);
}
.sup-search:focus[b-3vibgc8aps] {
    border-color: var(--s-gold);
    box-shadow: 0 0 0 3px var(--s-gold-dim);
    background-color: var(--s-elevated);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 14px;
}
.sup-search[b-3vibgc8aps]::placeholder { color: var(--s-text-dim); font-style: italic; }

/* Filter row — selects side by side */
.sup-filter-row[b-3vibgc8aps] { display: flex; gap: .5rem; }

/* ── Beautiful custom select ─────────────────────────────────── */
.sup-select[b-3vibgc8aps] {
    flex: 1;
    padding: .5rem 2.2rem .5rem .85rem;
    background: var(--s-elevated);
    border: 1.5px solid var(--s-border-mid);
    border-radius: var(--s-radius-sm);
    color: var(--s-text);
    font-size: .78rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: border-color var(--s-tr), box-shadow var(--s-tr), background var(--s-tr);

    /* remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* custom gold chevron arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 13px;
}
.sup-select:hover[b-3vibgc8aps] {
    border-color: var(--s-gold-ring);
    background-color: var(--s-overlay);
}
.sup-select:focus[b-3vibgc8aps] {
    border-color: var(--s-gold);
    box-shadow: 0 0 0 3px var(--s-gold-dim);
    background-color: var(--s-elevated);
}
.sup-select option[b-3vibgc8aps] {
    background: var(--s-surface);
    color: var(--s-text);
    padding: 6px 10px;
}

.sup-tag-filters[b-3vibgc8aps] { display: flex; flex-wrap: wrap; gap: .3rem; }
.sup-tag-filter[b-3vibgc8aps] {
    padding: .22rem .62rem; border-radius: 999px;
    border: 1px solid var(--s-border-mid); background: var(--s-elevated);
    color: var(--s-text-sub); font-size: .68rem; font-weight: 600; cursor: pointer;
    transition: all var(--s-tr);
}
.sup-tag-filter:hover[b-3vibgc8aps]  { color: var(--s-gold-l); border-color: var(--s-gold-ring); background: var(--s-gold-dim); }
.sup-tag-filter.active[b-3vibgc8aps] { background: var(--s-gold-dim2); color: var(--s-gold-l); border-color: var(--s-gold-ring); }

/* Conversation list */
.sup-conv-list[b-3vibgc8aps] { flex: 1; overflow-y: auto; }
.sup-conv-list[b-3vibgc8aps]::-webkit-scrollbar { width: 3px; }
.sup-conv-list[b-3vibgc8aps]::-webkit-scrollbar-thumb { background: var(--s-border-vis); border-radius: 3px; }

.sup-conv-item[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--s-border);
    cursor: pointer;
    transition: background var(--s-tr), border-left-color var(--s-tr);
    border-left: 3px solid transparent;
    position: relative;
}
.sup-conv-item:hover[b-3vibgc8aps] { background: var(--s-elevated); }
.sup-conv-item.selected[b-3vibgc8aps] {
    background: var(--s-gold-dim2);
    border-left-color: var(--s-gold);
}
.sup-conv-item.has-alert[b-3vibgc8aps] { border-left-color: var(--s-danger); }
.sup-conv-item.has-alert.selected[b-3vibgc8aps] { border-left-color: var(--s-gold); }
.sup-conv-item.is-closed[b-3vibgc8aps] { opacity: .5; }

.sup-conv-avatar[b-3vibgc8aps] {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--s-overlay), var(--s-elevated));
    border: 1.5px solid var(--s-border-mid);
    color: var(--s-gold); font-size: .83rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: border-color var(--s-tr);
}
.sup-conv-item.selected .sup-conv-avatar[b-3vibgc8aps] { border-color: var(--s-gold-ring); }
.alert-pulse[b-3vibgc8aps] {
    border-color: var(--s-danger) !important;
    animation: pulse-border-b-3vibgc8aps 2s infinite;
}
@keyframes pulse-border-b-3vibgc8aps {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,77,.5); }
    50%       { box-shadow: 0 0 0 5px rgba(255,77,77,0); }
}

.sup-conv-info[b-3vibgc8aps] { flex: 1; min-width: 0; }
.sup-conv-name-row[b-3vibgc8aps] { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.sup-conv-name[b-3vibgc8aps] {
    font-size: .84rem; font-weight: 600; color: var(--s-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sup-conv-time[b-3vibgc8aps] { font-size: .67rem; color: var(--s-text-sub); white-space: nowrap; flex-shrink: 0; }
.sup-conv-preview-row[b-3vibgc8aps] { display: flex; align-items: center; justify-content: space-between; margin-top: .15rem; }
.sup-conv-preview[b-3vibgc8aps] {
    font-size: .74rem; color: var(--s-text-sub);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.sup-alert-dot[b-3vibgc8aps] { color: var(--s-danger); font-size: .8rem; flex-shrink: 0; }
.sup-conv-badges[b-3vibgc8aps] { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }

.sup-badge[b-3vibgc8aps] {
    padding: .1rem .48rem; border-radius: 999px;
    font-size: .62rem; font-weight: 700;
}
.sup-badge-agent[b-3vibgc8aps]      { background: var(--s-gold-dim); color: var(--s-gold-l); border: 1px solid var(--s-gold-ring); }
.sup-badge-last-agent[b-3vibgc8aps] { background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.sup-badge-closed[b-3vibgc8aps]     { background: var(--s-success-dim); color: var(--s-success); }
.sup-badge-tag[b-3vibgc8aps]        { background: var(--s-elevated); color: var(--s-text-sub); border: 1px solid var(--s-border-mid); }
.sup-tag-vip[b-3vibgc8aps]      { background: var(--s-gold-dim) !important; color: var(--s-gold-l) !important; border-color: var(--s-gold-ring) !important; }
.sup-tag-urgent[b-3vibgc8aps]   { background: var(--s-danger-dim) !important; color: var(--s-danger) !important; border-color: var(--s-danger-ring) !important; }
.sup-tag-problem[b-3vibgc8aps]  { background: var(--s-warn-dim) !important; color: var(--s-warn) !important; border-color: var(--s-warn-ring) !important; }
.sup-tag-bigorder[b-3vibgc8aps] { background: var(--s-success-dim) !important; color: var(--s-success) !important; border-color: var(--s-success-ring) !important; }
.sup-tag-new[b-3vibgc8aps]      { background: var(--s-info-dim) !important; color: var(--s-info) !important; border-color: rgba(121,192,255,.3) !important; }

.sup-empty-list[b-3vibgc8aps] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 1rem; color: var(--s-text-dim); gap: .65rem;
}
.sup-empty-list .bi[b-3vibgc8aps] { font-size: 2.5rem; }
.sup-empty-list p[b-3vibgc8aps]   { font-size: .84rem; margin: 0; }

/* ════════════════════════════════════════════════════════════════
   CENTER — Live Command View
════════════════════════════════════════════════════════════════ */
.sup-live-view[b-3vibgc8aps] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--s-black);
    overflow: hidden;
    border-left: 1px solid var(--s-border);
    border-right: 1px solid var(--s-border);
}

/* Empty state */
.sup-live-empty[b-3vibgc8aps] {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1.1rem; color: var(--s-text-sub);
}
.sup-live-empty-icon[b-3vibgc8aps] {
    width: 84px; height: 84px;
    background: radial-gradient(circle, var(--s-gold-dim2) 0%, transparent 70%);
    border-radius: 50%;
    border: 2px solid var(--s-gold-ring);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--s-gold);
    box-shadow: 0 0 40px var(--s-gold-dim);
}
.sup-live-empty h3[b-3vibgc8aps] {
    color: var(--s-gold-pale); font-size: 1.15rem; margin: 0;
    letter-spacing: .06em; font-weight: 700;
}
.sup-live-empty p[b-3vibgc8aps] { font-size: .88rem; margin: 0; max-width: 280px; text-align: center; }

.sup-inline-alerts[b-3vibgc8aps] { display: flex; flex-direction: column; gap: .45rem; max-width: 420px; width: 100%; }
.sup-inline-alert[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .9rem; border-radius: var(--s-radius-sm);
    cursor: pointer; transition: transform var(--s-tr), opacity var(--s-tr);
    font-size: .82rem;
}
.sup-inline-alert:hover[b-3vibgc8aps] { opacity: .85; transform: translateX(3px); }
.sup-inline-alert.warning[b-3vibgc8aps]  { background: var(--s-warn-dim);  border: 1px solid var(--s-warn-ring);    color: var(--s-warn); }
.sup-inline-alert.high[b-3vibgc8aps]     { background: var(--s-danger-dim); border: 1px solid var(--s-danger-ring); color: var(--s-danger); }
.sup-inline-alert.critical[b-3vibgc8aps] { background: rgba(255,77,77,.18); border: 1px solid rgba(255,77,77,.5);  color: var(--s-danger); animation: alert-flash-b-3vibgc8aps 2s infinite; }

@keyframes alert-flash-b-3vibgc8aps {
    0%, 100% { border-color: rgba(255,77,77,.5); }
    50%       { border-color: rgba(255,77,77,.9); box-shadow: 0 0 12px rgba(255,77,77,.25); }
}

/* Live chat header — control panel */
.sup-live-header[b-3vibgc8aps] {
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem 1.1rem;
    background: var(--s-surface);
    border-bottom: 2px solid var(--s-border-mid);
    flex-shrink: 0; gap: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.sup-live-contact[b-3vibgc8aps] { display: flex; align-items: center; gap: .85rem; }
.sup-live-avatar[b-3vibgc8aps] {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #c9a227, #6d4e0a);
    display: flex; align-items: center; justify-content: center;
    font-size: .92rem; font-weight: 700; color: #000;
    box-shadow: 0 2px 10px var(--s-gold-ring);
}
.sup-live-name[b-3vibgc8aps] { font-size: .95rem; font-weight: 700; color: var(--s-text); letter-spacing: .01em; }
.sup-live-meta[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .55rem;
    font-size: .74rem; color: var(--s-text-sub); margin-top: .18rem;
}
.sup-meta-active[b-3vibgc8aps] { color: var(--s-success); font-weight: 700; }
.sup-meta-closed[b-3vibgc8aps] { color: var(--s-text-dim); }

/* ─── CONTROL BUTTONS — the most important part ─────────────── */
.sup-live-controls[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.sup-ctrl-btn[b-3vibgc8aps] {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .52rem 1.05rem; border-radius: var(--s-radius-sm);
    font-size: .82rem; font-weight: 700; cursor: pointer;
    border: 1px solid transparent; transition: all var(--s-tr);
    letter-spacing: .01em; white-space: nowrap;
}

/* Takeover — gold, commanding */
.sup-ctrl-takeover[b-3vibgc8aps] {
    background: linear-gradient(135deg, #c9a227 0%, #9a7010 100%);
    color: #000;
    box-shadow: 0 3px 16px var(--s-gold-ring), 0 1px 0 rgba(255,255,255,.15) inset;
}
.sup-ctrl-takeover:hover[b-3vibgc8aps] {
    filter: brightness(1.12);
    box-shadow: 0 5px 24px var(--s-gold-glow);
    transform: translateY(-1px);
}

/* Release */
.sup-ctrl-release[b-3vibgc8aps] {
    background: var(--s-elevated); border-color: var(--s-border-mid); color: var(--s-text-sub);
}
.sup-ctrl-release:hover[b-3vibgc8aps] { color: var(--s-text); border-color: var(--s-border-vis); }

/* Close conversation */
.sup-ctrl-close[b-3vibgc8aps] {
    background: var(--s-danger-dim); border-color: var(--s-danger-ring); color: var(--s-danger);
}
.sup-ctrl-close:hover[b-3vibgc8aps] { background: rgba(255,77,77,.18); box-shadow: 0 2px 10px var(--s-danger-ring); }

/* Reopen */
.sup-ctrl-reopen[b-3vibgc8aps] {
    background: var(--s-success-dim); border-color: var(--s-success-ring); color: var(--s-success);
}
.sup-ctrl-reopen:hover[b-3vibgc8aps] { background: rgba(61,220,132,.18); }

.sup-assign-select[b-3vibgc8aps] {
    padding: .48rem .75rem;
    background: var(--s-elevated); border: 1px solid var(--s-border-mid);
    border-radius: var(--s-radius-sm); color: var(--s-text-sub);
    font-size: .8rem; cursor: pointer; outline: none;
    transition: border-color var(--s-tr);
}
.sup-assign-select:focus[b-3vibgc8aps] { border-color: var(--s-gold-ring); color: var(--s-text); }

/* Admin control active banner */
.sup-admin-banner[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem 1.1rem;
    background: rgba(201,162,39,.08);
    border-bottom: 1px solid rgba(201,162,39,.22);
    color: var(--s-gold-l); font-size: .82rem; flex-shrink: 0;
}
.sup-admin-banner i[b-3vibgc8aps] { font-size: .95rem; }

/* Tag bar */
.sup-tag-bar[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    padding: .55rem 1.1rem;
    background: var(--s-surface);
    border-bottom: 1px solid var(--s-border);
    flex-shrink: 0;
}
.sup-tag-bar-label[b-3vibgc8aps] { color: var(--s-gold); font-size: .88rem; flex-shrink: 0; }
.sup-tag-toggle[b-3vibgc8aps] {
    padding: .22rem .65rem; border-radius: 999px;
    border: 1px solid var(--s-border-mid); background: var(--s-elevated);
    color: var(--s-text-sub); font-size: .73rem; font-weight: 600;
    cursor: pointer; transition: all var(--s-tr);
}
.sup-tag-toggle:hover[b-3vibgc8aps] { color: var(--s-gold-l); border-color: var(--s-gold-ring); background: var(--s-gold-dim); }
.sup-tag-toggle.on[b-3vibgc8aps] { font-weight: 700; }
.sup-tag-toggle.on.sup-tag-vip[b-3vibgc8aps]      { background: var(--s-gold-dim2); color: var(--s-gold-l); border-color: var(--s-gold-ring); }
.sup-tag-toggle.on.sup-tag-urgent[b-3vibgc8aps]   { background: var(--s-danger-dim); color: var(--s-danger); border-color: var(--s-danger-ring); }
.sup-tag-toggle.on.sup-tag-problem[b-3vibgc8aps]  { background: var(--s-warn-dim); color: var(--s-warn); border-color: var(--s-warn-ring); }
.sup-tag-toggle.on.sup-tag-bigorder[b-3vibgc8aps] { background: var(--s-success-dim); color: var(--s-success); border-color: var(--s-success-ring); }
.sup-tag-toggle.on.sup-tag-new[b-3vibgc8aps]      { background: var(--s-info-dim); color: var(--s-info); border-color: rgba(121,192,255,.35); }
.sup-tag-toggle.on.sup-tag-closed[b-3vibgc8aps]   { background: var(--s-success-dim); color: var(--s-success); border-color: var(--s-success-ring); }

.sup-quality-wrap[b-3vibgc8aps] { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.sup-quality-label[b-3vibgc8aps] { color: var(--s-gold); font-size: .88rem; }
.sup-quality-slider[b-3vibgc8aps] { width: 90px; accent-color: var(--s-gold); cursor: pointer; }
.sup-quality-val[b-3vibgc8aps] { font-size: .78rem; color: var(--s-gold-l); font-weight: 700; min-width: 50px; }

/* Messages */
.sup-messages[b-3vibgc8aps] {
    flex: 1; overflow-y: auto;
    padding: 1.1rem;
    display: flex; flex-direction: column; gap: .65rem;
    background: var(--s-black);
}
.sup-messages[b-3vibgc8aps]::-webkit-scrollbar { width: 4px; }
.sup-messages[b-3vibgc8aps]::-webkit-scrollbar-thumb { background: var(--s-border-mid); border-radius: 4px; }

.sup-msg[b-3vibgc8aps] { display: flex; }
.sup-from-me[b-3vibgc8aps]   { justify-content: flex-end; }
.sup-from-them[b-3vibgc8aps] { justify-content: flex-start; }

.sup-msg-bubble[b-3vibgc8aps] {
    max-width: 70%; padding: .6rem .85rem;
    border-radius: 16px; font-size: .86rem; line-height: 1.55;
}
.sup-from-me   .sup-msg-bubble[b-3vibgc8aps] {
    background: linear-gradient(135deg, var(--s-overlay), var(--s-black));
    border: 1px solid rgba(201,162,39,.35);
    color: var(--s-text); border-radius: 16px 16px 3px 16px;
    box-shadow: 0 2px 8px rgba(201,162,39,.08);
}
.sup-from-them .sup-msg-bubble[b-3vibgc8aps] {
    background: var(--s-surface); border: 1px solid var(--s-border-mid);
    color: var(--s-text); border-radius: 16px 16px 16px 3px;
}
.sup-msg-deleted[b-3vibgc8aps] { opacity: .38; font-style: italic; }

.sup-msg-sender[b-3vibgc8aps] { font-size: .68rem; font-weight: 700; color: var(--s-gold); display: block; margin-bottom: .25rem; }
.sup-msg-quote[b-3vibgc8aps]  { font-size: .76rem; color: var(--s-text-sub); border-left: 3px solid var(--s-gold); padding-left: .55rem; margin-bottom: .35rem; border-radius: 0 4px 4px 0; }
.sup-msg-img img[b-3vibgc8aps] { max-width: 210px; border-radius: 10px; }
.sup-msg-doc[b-3vibgc8aps] { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--s-text-sub); }
.sup-msg-text[b-3vibgc8aps] { margin-top: .25rem; }
.sup-angry-text[b-3vibgc8aps] { color: var(--s-danger); font-weight: 600; }
.sup-msg-time[b-3vibgc8aps] { font-size: .66rem; color: var(--s-text-dim); margin-top: .35rem; text-align: right; }
.sup-msg-edited[b-3vibgc8aps] { color: var(--s-text-sub); font-style: italic; }

.sup-no-msgs[b-3vibgc8aps] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; color: var(--s-text-dim); gap: .65rem; padding: 2.5rem;
}
.sup-no-msgs .bi[b-3vibgc8aps] { font-size: 2.5rem; }

/* Admin compose */
.sup-compose[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem 1.1rem;
    background: var(--s-surface);
    border-top: 1px solid rgba(201,162,39,.2);
    flex-shrink: 0;
}
.sup-compose-input[b-3vibgc8aps] {
    flex: 1; padding: .55rem 1rem;
    background: var(--s-elevated); border: 1px solid var(--s-gold-ring);
    border-radius: 999px; color: var(--s-text); font-size: .85rem; outline: none;
    transition: box-shadow var(--s-tr);
}
.sup-compose-input:focus[b-3vibgc8aps] { box-shadow: 0 0 0 3px var(--s-gold-dim); }
.sup-compose-input[b-3vibgc8aps]::placeholder { color: var(--s-text-sub); }
.sup-compose-send[b-3vibgc8aps] {
    width: 40px; height: 40px; flex-shrink: 0;
    background: linear-gradient(135deg, #c9a227, #9a7010);
    border: none; border-radius: 50%; color: #000; font-size: .92rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 12px var(--s-gold-ring);
    transition: all var(--s-tr);
}
.sup-compose-send:hover:not(:disabled)[b-3vibgc8aps] { filter: brightness(1.12); transform: scale(1.05); }
.sup-compose-send:disabled[b-3vibgc8aps] { opacity: .3; cursor: default; }

/* Internal notes */
.sup-notes-section[b-3vibgc8aps] {
    background: var(--s-surface);
    border-top: 1px solid var(--s-border-mid);
    flex-shrink: 0; max-height: 185px;
    display: flex; flex-direction: column;
}
.sup-notes-header[b-3vibgc8aps] {
    padding: .55rem 1.1rem;
    font-size: .72rem; font-weight: 800; color: var(--s-gold);
    text-transform: uppercase; letter-spacing: .07em;
    display: flex; align-items: center; gap: .45rem;
    border-bottom: 1px solid var(--s-border-mid); flex-shrink: 0;
}
.sup-notes-list[b-3vibgc8aps] { flex: 1; overflow-y: auto; padding: .5rem .85rem; display: flex; flex-direction: column; gap: .4rem; }
.sup-notes-list[b-3vibgc8aps]::-webkit-scrollbar { width: 3px; }
.sup-notes-list[b-3vibgc8aps]::-webkit-scrollbar-thumb { background: var(--s-border-mid); }
.sup-note-item[b-3vibgc8aps] {
    padding: .4rem .6rem; background: var(--s-elevated);
    border-radius: var(--s-radius-xs); border: 1px solid var(--s-border-mid);
}
.sup-note-author[b-3vibgc8aps] { font-size: .68rem; font-weight: 700; color: var(--s-gold); }
.sup-note-time[b-3vibgc8aps]   { font-size: .65rem; color: var(--s-text-sub); margin-left: .4rem; }
.sup-note-text[b-3vibgc8aps]   { font-size: .79rem; color: var(--s-text); margin: .18rem 0 0; line-height: 1.45; }
.sup-notes-empty[b-3vibgc8aps] { font-size: .76rem; color: var(--s-text-dim); text-align: center; padding: .5rem; margin: 0; }
.sup-note-compose[b-3vibgc8aps] { display: flex; gap: .4rem; padding: .45rem .85rem; border-top: 1px solid var(--s-border); flex-shrink: 0; }
.sup-note-input[b-3vibgc8aps] {
    flex: 1; padding: .38rem .75rem;
    background: var(--s-elevated); border: 1px solid var(--s-border-mid);
    border-radius: 999px; color: var(--s-text); font-size: .78rem; outline: none;
    transition: border-color var(--s-tr);
}
.sup-note-input:focus[b-3vibgc8aps] { border-color: var(--s-gold-ring); }
.sup-note-input[b-3vibgc8aps]::placeholder { color: var(--s-text-dim); }
.sup-note-add[b-3vibgc8aps] {
    width: 32px; height: 32px; flex-shrink: 0;
    background: var(--s-gold-dim); border: 1px solid var(--s-gold-ring);
    border-radius: 50%; color: var(--s-gold-l); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .9rem;
    transition: all var(--s-tr);
}
.sup-note-add:hover:not(:disabled)[b-3vibgc8aps] { background: var(--s-gold); color: #000; box-shadow: 0 2px 10px var(--s-gold-ring); }
.sup-note-add:disabled[b-3vibgc8aps] { opacity: .3; cursor: default; }

/* ════════════════════════════════════════════════════════════════
   RIGHT PANEL — Alerts + Agents + Stats
════════════════════════════════════════════════════════════════ */
.sup-right[b-3vibgc8aps] {
    display: flex; flex-direction: column;
    background: var(--s-surface);
    border-left: 1px solid var(--s-border-mid);
    overflow-y: auto;
}
.sup-right[b-3vibgc8aps]::-webkit-scrollbar { width: 3px; }
.sup-right[b-3vibgc8aps]::-webkit-scrollbar-thumb { background: var(--s-border-vis); }

.sup-right-section[b-3vibgc8aps] {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--s-border);
}
.sup-right-title[b-3vibgc8aps] {
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .09em; color: var(--s-text-sub);
    display: flex; align-items: center; gap: .45rem;
    margin-bottom: .75rem;
}
.sup-right-title .bi[b-3vibgc8aps] { color: var(--s-gold); font-size: .82rem; }
.sup-alert-count[b-3vibgc8aps] {
    margin-left: auto;
    padding: .1rem .45rem; border-radius: 999px;
    background: var(--s-danger); color: #fff;
    font-size: .65rem; font-weight: 700;
    animation: kpi-pulse-b-3vibgc8aps 1.8s ease-in-out infinite;
}

/* Alerts */
.sup-alerts-list[b-3vibgc8aps] { display: flex; flex-direction: column; gap: .4rem; }
.sup-alert-item[b-3vibgc8aps] {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .5rem .6rem; border-radius: var(--s-radius-xs);
    cursor: pointer; transition: transform var(--s-tr), opacity var(--s-tr);
    font-size: .76rem;
}
.sup-alert-item:hover[b-3vibgc8aps] { transform: translateX(2px); opacity: .9; }
.sup-alert-item.warning[b-3vibgc8aps]  { background: var(--s-warn-dim);  border: 1px solid var(--s-warn-ring);    color: var(--s-warn); }
.sup-alert-item.high[b-3vibgc8aps]     { background: var(--s-danger-dim); border: 1px solid var(--s-danger-ring); color: var(--s-danger); }
.sup-alert-item.critical[b-3vibgc8aps] { background: rgba(255,77,77,.18); border: 1px solid rgba(255,77,77,.5);  color: var(--s-danger); }
.sup-alert-icon[b-3vibgc8aps] { font-size: .9rem; flex-shrink: 0; padding-top: .05rem; }
.sup-alert-contact[b-3vibgc8aps] { font-weight: 700; line-height: 1.25; }
.sup-alert-msg[b-3vibgc8aps]     { font-size: .7rem; opacity: .85; margin-top: .1rem; }
.sup-no-alerts[b-3vibgc8aps] { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--s-success); padding: .3rem 0; }

/* Agents */
.sup-agents-list[b-3vibgc8aps] { display: flex; flex-direction: column; gap: .45rem; }
.sup-agent-card[b-3vibgc8aps] {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .75rem;
    background: var(--s-elevated); border: 1px solid var(--s-border-mid);
    border-radius: var(--s-radius-xs);
    transition: border-color var(--s-tr), opacity var(--s-tr);
}
.sup-agent-card:hover[b-3vibgc8aps] { border-color: var(--s-gold-ring); }
.sup-agent-card--off[b-3vibgc8aps] {
    opacity: .55;
    border-color: var(--s-border-mid) !important;
    filter: grayscale(.4);
}
/* avatar + dot wrapper */
.sup-agent-avatar-wrap[b-3vibgc8aps] { position: relative; flex-shrink: 0; width: 34px; height: 34px; }
.sup-agent-avatar[b-3vibgc8aps] {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--s-overlay), var(--s-elevated));
    border: 1.5px solid var(--s-gold-ring);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: var(--s-gold);
}
/* dot statut */
.sup-agent-dot[b-3vibgc8aps] {
    position: absolute; bottom: 0; right: 0;
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid var(--s-elevated);
}
.sup-agent-dot--on[b-3vibgc8aps]  { background: #22c55e; }
.sup-agent-dot--off[b-3vibgc8aps] { background: #64748b; }
/* label statut inline */
.sup-agent-status-lbl[b-3vibgc8aps] {
    font-size: .6rem; font-weight: 700; border-radius: 4px;
    padding: .05rem .35rem; margin-left: .3rem;
    vertical-align: middle;
}
.sup-agent-status-lbl.on[b-3vibgc8aps]  { background: rgba(34,197,94,.14); color: #22c55e; }
.sup-agent-status-lbl.off[b-3vibgc8aps] { background: rgba(100,116,139,.14); color: #94a3b8; }
/* pills titre */
.sup-agent-count-pill[b-3vibgc8aps] {
    font-size: .6rem; font-weight: 700; border-radius: 999px;
    padding: .1rem .45rem;
}
.sup-agent-count-actif[b-3vibgc8aps]   { background: rgba(34,197,94,.15);  color: #22c55e; }
.sup-agent-count-inactif[b-3vibgc8aps] { background: rgba(100,116,139,.15); color: #94a3b8; }
.sup-agent-info[b-3vibgc8aps] { flex: 1; min-width: 0; }
.sup-agent-name[b-3vibgc8aps] {
    font-size: .8rem; font-weight: 600; color: var(--s-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center;
}
.sup-agent-metrics[b-3vibgc8aps] { display: flex; gap: .5rem; font-size: .65rem; color: var(--s-text-sub); margin-top: .15rem; flex-wrap: wrap; }
.sup-agent-metrics .bi[b-3vibgc8aps] { color: var(--s-gold); font-size: .7rem; }
.sup-agent-missed[b-3vibgc8aps] { color: var(--s-danger) !important; font-weight: 700; }
.sup-load-badge[b-3vibgc8aps] {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid transparent;
}
.sup-load-badge.free[b-3vibgc8aps]       { background: var(--s-success-dim); color: var(--s-success); border-color: var(--s-success-ring); }
.sup-load-badge.busy[b-3vibgc8aps]       { background: var(--s-warn-dim);    color: var(--s-warn);    border-color: var(--s-warn-ring); }
.sup-load-badge.overloaded[b-3vibgc8aps] { background: var(--s-danger-dim);  color: var(--s-danger);  border-color: var(--s-danger-ring); animation: kpi-pulse-b-3vibgc8aps 1.5s infinite; }

/* Stats */
.sup-stat-rows[b-3vibgc8aps] { display: flex; flex-direction: column; gap: .35rem; }
.sup-stat-row[b-3vibgc8aps] { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; padding: .2rem 0; }
.sup-stat-label[b-3vibgc8aps] { color: var(--s-text-sub); }
.sup-stat-val[b-3vibgc8aps]   { font-weight: 700; color: var(--s-text); font-size: .88rem; }
.sup-stat-gold[b-3vibgc8aps]  { color: var(--s-gold-l) !important; }
.sup-stat-warn[b-3vibgc8aps]  { color: var(--s-warn) !important; }

/* ════════════════════════════════════════════════════════════════
   PERFORMANCE TAB — Agent Scorecards
════════════════════════════════════════════════════════════════ */
.sup-perf-page[b-3vibgc8aps] {
    flex: 1; overflow-y: auto; padding: 1.75rem;
    background: var(--s-void);
}
.sup-perf-page[b-3vibgc8aps]::-webkit-scrollbar { width: 5px; }
.sup-perf-page[b-3vibgc8aps]::-webkit-scrollbar-thumb { background: var(--s-border-mid); border-radius: 5px; }

.sup-perf-header[b-3vibgc8aps] { margin-bottom: 1.75rem; }
.sup-perf-title[b-3vibgc8aps]  {
    font-size: 1.25rem; font-weight: 800; color: var(--s-gold-pale);
    letter-spacing: .05em; margin: 0 0 .3rem;
    text-shadow: 0 0 24px var(--s-gold-dim);
}
.sup-perf-sub[b-3vibgc8aps]    { font-size: .84rem; color: var(--s-text-sub); margin: 0; }

.sup-perf-grid[b-3vibgc8aps] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.1rem;
}

.sup-perf-card[b-3vibgc8aps] {
    background: var(--s-surface);
    border: 1px solid var(--s-border-mid);
    border-radius: var(--s-radius);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
    transition: border-color var(--s-tr-slow), box-shadow var(--s-tr-slow), transform var(--s-tr-slow);
    position: relative; overflow: hidden;
}
.sup-perf-card[b-3vibgc8aps]::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--s-gold) 40%, var(--s-gold-l) 60%, transparent 100%);
    opacity: 0; transition: opacity var(--s-tr-slow);
}
.sup-perf-card:hover[b-3vibgc8aps] {
    border-color: var(--s-gold-ring);
    box-shadow: 0 6px 30px rgba(201,162,39,.08);
    transform: translateY(-2px);
}
.sup-perf-card:hover[b-3vibgc8aps]::before { opacity: 1; }

.sup-perf-card-header[b-3vibgc8aps] { display: flex; align-items: center; gap: .85rem; }
.sup-perf-avatar[b-3vibgc8aps] {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg, #c9a227, #6d4e0a);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; color: #000;
    box-shadow: 0 3px 12px var(--s-gold-ring);
}
.sup-perf-ident[b-3vibgc8aps] { flex: 1; }
.sup-perf-name[b-3vibgc8aps]  { font-size: .95rem; font-weight: 700; color: var(--s-text); }
.sup-perf-role[b-3vibgc8aps]  { font-size: .7rem; color: var(--s-text-sub); margin-top: .1rem; }
.sup-score-badge[b-3vibgc8aps] {
    display: flex; align-items: baseline; gap: .1rem;
    font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em;
}
.sup-score-badge span[b-3vibgc8aps] { font-size: .65rem; font-weight: 500; color: var(--s-text-sub); letter-spacing: 0; }
.score-top[b-3vibgc8aps] { color: var(--s-success); text-shadow: 0 0 16px var(--s-success-ring); }
.score-mid[b-3vibgc8aps] { color: var(--s-warn); }
.score-low[b-3vibgc8aps] { color: var(--s-danger); }

.sup-perf-metrics[b-3vibgc8aps] { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.sup-perf-metric[b-3vibgc8aps] {
    display: flex; flex-direction: column; align-items: center;
    padding: .7rem .5rem;
    background: var(--s-elevated); border: 1px solid var(--s-border);
    border-radius: var(--s-radius-xs); gap: .25rem;
    transition: border-color var(--s-tr);
}
.sup-perf-metric:hover[b-3vibgc8aps] { border-color: var(--s-gold-ring); }
.sup-perf-metric .bi[b-3vibgc8aps] { font-size: .92rem; color: var(--s-gold); }
.sup-perf-metric-val[b-3vibgc8aps]   { font-size: 1.05rem; font-weight: 800; color: var(--s-text); line-height: 1; }
.sup-perf-metric-label[b-3vibgc8aps] { font-size: .62rem; color: var(--s-text-sub); text-align: center; line-height: 1.3; }
.metric-warn .bi[b-3vibgc8aps]                   { color: var(--s-danger) !important; }
.metric-warn .sup-perf-metric-val[b-3vibgc8aps]  { color: var(--s-danger) !important; }

.sup-perf-bar-wrap[b-3vibgc8aps] { display: flex; flex-direction: column; gap: .35rem; }
.sup-perf-bar-label[b-3vibgc8aps] {
    font-size: .65rem; color: var(--s-text-sub); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.sup-perf-bar-track[b-3vibgc8aps] {
    height: 7px; background: var(--s-elevated);
    border-radius: 999px; overflow: hidden;
    border: 1px solid var(--s-border);
}
.sup-perf-bar-fill[b-3vibgc8aps] { height: 100%; border-radius: 999px; transition: width 700ms ease; }
.fill-top[b-3vibgc8aps] { background: linear-gradient(90deg, #3ddc84, #28a060); box-shadow: 0 0 8px rgba(61,220,132,.3); }
.fill-mid[b-3vibgc8aps] { background: linear-gradient(90deg, #ffb347, #c07820); }
.fill-low[b-3vibgc8aps] { background: linear-gradient(90deg, #ff4d4d, #c03535); }

.sup-perf-actions[b-3vibgc8aps] { display: flex; gap: .5rem; }
.sup-perf-action[b-3vibgc8aps] {
    flex: 1; padding: .5rem .6rem;
    border: 1px solid var(--s-border-mid); border-radius: var(--s-radius-xs);
    background: var(--s-elevated); color: var(--s-text-sub);
    font-size: .77rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    transition: all var(--s-tr);
}
.sup-perf-action:hover[b-3vibgc8aps] {
    color: var(--s-gold-l); border-color: var(--s-gold-ring);
    background: var(--s-gold-dim); box-shadow: 0 2px 10px var(--s-gold-dim);
}
.sup-perf-action-warn:hover[b-3vibgc8aps] {
    color: var(--s-warn); border-color: var(--s-warn-ring);
    background: var(--s-warn-dim); box-shadow: 0 2px 10px var(--s-warn-dim);
}

.sup-perf-empty[b-3vibgc8aps] {
    display: flex; flex-direction: column; align-items: center; gap: .85rem;
    color: var(--s-text-sub); padding: 4rem;
}
.sup-perf-empty .bi[b-3vibgc8aps] { font-size: 3rem; color: var(--s-text-dim); }

/* ════════════════════════════════════════════════════════════════
   LOGS TAB — Activity Journal
════════════════════════════════════════════════════════════════ */
.sup-logs-page[b-3vibgc8aps] {
    flex: 1; overflow-y: auto; padding: 1.75rem;
    background: var(--s-void);
    display: flex; flex-direction: column; gap: 1.1rem;
}
.sup-logs-page[b-3vibgc8aps]::-webkit-scrollbar { width: 5px; }
.sup-logs-page[b-3vibgc8aps]::-webkit-scrollbar-thumb { background: var(--s-border-mid); border-radius: 5px; }

.sup-logs-header[b-3vibgc8aps] {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .85rem;
}
.sup-logs-title[b-3vibgc8aps] {
    font-size: 1.25rem; font-weight: 800; color: var(--s-gold-pale);
    letter-spacing: .05em; margin: 0;
    text-shadow: 0 0 24px var(--s-gold-dim);
}
.sup-logs-filters[b-3vibgc8aps] { display: flex; gap: .55rem; }

.sup-logs-list[b-3vibgc8aps] { display: flex; flex-direction: column; gap: .35rem; }
.sup-log-item[b-3vibgc8aps] {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: .75rem 1rem;
    background: var(--s-surface); border: 1px solid var(--s-border-mid);
    border-radius: var(--s-radius-sm);
    transition: border-color var(--s-tr), transform var(--s-tr);
}
.sup-log-item:hover[b-3vibgc8aps] { border-color: var(--s-gold-ring); transform: translateX(3px); }

.sup-log-icon[b-3vibgc8aps] {
    width: 33px; height: 33px; flex-shrink: 0;
    border-radius: 50%; background: var(--s-elevated);
    border: 1px solid var(--s-border-mid);
    display: flex; align-items: center; justify-content: center;
    font-size: .84rem; color: var(--s-gold);
}
.sup-log-body[b-3vibgc8aps] { flex: 1; min-width: 0; }
.sup-log-user[b-3vibgc8aps]   { font-size: .84rem; font-weight: 600; color: var(--s-text); }
.sup-log-action[b-3vibgc8aps] { font-size: .74rem; color: var(--s-text-sub); margin-left: .4rem; }
.sup-log-detail[b-3vibgc8aps] { font-size: .76rem; color: var(--s-text-sub); margin-top: .12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-log-time[b-3vibgc8aps]   { font-size: .7rem; color: var(--s-text-dim); white-space: nowrap; flex-shrink: 0; }

.sup-logs-empty[b-3vibgc8aps] {
    display: flex; flex-direction: column; align-items: center; gap: .85rem;
    color: var(--s-text-dim); padding: 4rem;
}
.sup-logs-empty .bi[b-3vibgc8aps] { font-size: 3rem; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .sup-main[b-3vibgc8aps] { grid-template-columns: 260px 1fr 260px; }
}
@media (max-width: 960px) {
    .sup-main[b-3vibgc8aps] { grid-template-columns: 240px 1fr; }
    .sup-right[b-3vibgc8aps] { display: none; }
}
@media (max-width: 680px) {
    .sup-main[b-3vibgc8aps] { display: flex; flex-direction: column; }
    .sup-sidebar[b-3vibgc8aps] { max-height: 230px; }
    .sup-kpi-row[b-3vibgc8aps] { display: none; }
    .sup-header[b-3vibgc8aps] { flex-wrap: wrap; height: auto; padding: .75rem 1rem; }
}
/* /Pages/Parametres.razor.rz.scp.css */
.parametres-page[b-4qa1q2lby8] {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 0;
}

.parametres-header[b-4qa1q2lby8] {
    margin-bottom: 1.5rem;
}

.parametres-title[b-4qa1q2lby8] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.parametres-title .bi[b-4qa1q2lby8] {
    color: #6366f1;
}

.parametres-subtitle[b-4qa1q2lby8] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.parametres-card[b-4qa1q2lby8] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
}

.parametres-section-title[b-4qa1q2lby8] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.parametres-section-title .bi[b-4qa1q2lby8] {
    color: #6366f1;
}

.parametres-hint[b-4qa1q2lby8] {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.25rem;
}

.parametres-themes[b-4qa1q2lby8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.parametres-theme-card[b-4qa1q2lby8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.parametres-theme-card:hover[b-4qa1q2lby8] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.parametres-theme-card.active[b-4qa1q2lby8] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.parametres-theme-preview[b-4qa1q2lby8] {
    width: 100%;
    height: 72px;
    border-radius: 10px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
}

.parametres-theme-preview-bar[b-4qa1q2lby8] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    display: block;
}

.parametres-theme-preview-dot[b-4qa1q2lby8] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.parametres-theme-name[b-4qa1q2lby8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.parametres-theme-check[b-4qa1q2lby8] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.1rem;
    color: #6366f1;
}

/* Thèmes sombres : texte clair sur la page Paramètres */
.theme-dark .parametres-title[b-4qa1q2lby8],
.theme-dark .parametres-section-title[b-4qa1q2lby8],
.theme-dark .parametres-theme-name[b-4qa1q2lby8] { color: #e2e8f0; }
.theme-dark .parametres-subtitle[b-4qa1q2lby8],
.theme-dark .parametres-hint[b-4qa1q2lby8] { color: #94a3b8; }
.theme-dark .parametres-card[b-4qa1q2lby8] { background: #1e293b; border-color: #334155; }
.theme-dark .parametres-theme-card[b-4qa1q2lby8] { background: #334155; border-color: #475569; }
.theme-dark .parametres-theme-card:hover[b-4qa1q2lby8] { border-color: #64748b; }
.theme-dark .parametres-theme-card.active[b-4qa1q2lby8] { border-color: #6366f1; }

.theme-whatsapp .parametres-title[b-4qa1q2lby8],
.theme-whatsapp .parametres-section-title[b-4qa1q2lby8],
.theme-whatsapp .parametres-theme-name[b-4qa1q2lby8] { color: #e9edef; }
.theme-whatsapp .parametres-subtitle[b-4qa1q2lby8],
.theme-whatsapp .parametres-hint[b-4qa1q2lby8] { color: #8696a0; }
.theme-whatsapp .parametres-card[b-4qa1q2lby8] { background: #111b21; border-color: #202c33; }
.theme-whatsapp .parametres-theme-card[b-4qa1q2lby8] { background: #202c33; border-color: #2a3942; }
.theme-whatsapp .parametres-theme-card:hover[b-4qa1q2lby8] { border-color: #2a3942; }
.theme-whatsapp .parametres-theme-card.active[b-4qa1q2lby8] { border-color: #00a884; }
.theme-whatsapp .parametres-theme-check[b-4qa1q2lby8] { color: #00a884; }

.theme-blue .parametres-title .bi[b-4qa1q2lby8],
.theme-blue .parametres-section-title .bi[b-4qa1q2lby8] { color: #ea580c; }
.theme-blue .parametres-theme-card.active[b-4qa1q2lby8] { border-color: #ea580c; }
.theme-blue .parametres-theme-check[b-4qa1q2lby8] { color: #ea580c; }

.theme-green .parametres-title .bi[b-4qa1q2lby8],
.theme-green .parametres-section-title .bi[b-4qa1q2lby8] { color: #16a34a; }
.theme-green .parametres-theme-card.active[b-4qa1q2lby8] { border-color: #16a34a; }
.theme-green .parametres-theme-check[b-4qa1q2lby8] { color: #16a34a; }
/* /Pages/Permissions.razor.rz.scp.css */
/* Permissions — même langage visuel que la sidebar (NavMenu) */

/* ── Sélecteur de compte ── */
.perm-user-panel[b-l7ybuw9fce] {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-elevated, #252119);
}

.perm-user-loading[b-l7ybuw9fce] {
    display: flex;
    align-items: center;
    font-size: .88rem;
    color: var(--ds-text-muted, #9c948a);
}

.perm-user-row[b-l7ybuw9fce] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem .85rem;
}

.perm-user-field-label[b-l7ybuw9fce] {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ds-text-muted, #9c948a);
    flex-shrink: 0;
}

.perm-user-search[b-l7ybuw9fce] {
    flex: 1;
    min-width: 160px;
    padding: .55rem .85rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
    color: var(--ds-text, #fefdfb);
    font-size: .86rem;
    outline: none;
}

.perm-user-search:focus[b-l7ybuw9fce] {
    border-color: var(--ds-border-focus, #fb923c);
}

.perm-user-select-wrap[b-l7ybuw9fce] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.perm-user-inline-spin[b-l7ybuw9fce] {
    color: #fb923c;
}

.perm-user-select[b-l7ybuw9fce] {
    min-width: 200px;
    max-width: min(420px, 100%);
    padding: .5rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
    color: var(--ds-text, #fefdfb);
    font-size: .84rem;
    font-weight: 600;
}

.perm-user-hint[b-l7ybuw9fce] {
    margin: .65rem 0 0;
    font-size: .78rem;
    color: var(--ds-text-muted, #9c948a);
    line-height: 1.45;
}

.perm-user-hint--warn[b-l7ybuw9fce] {
    color: #fcd34d;
}

.perm-shell[b-l7ybuw9fce] {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
    font-family: var(--ds-font-sans, 'Inter', system-ui, sans-serif);
    color: var(--ds-text, #fefdfb);
}

.perm-head[b-l7ybuw9fce] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.perm-title[b-l7ybuw9fce] {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 .35rem;
    color: var(--ds-text, #fefdfb);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.perm-title-icon[b-l7ybuw9fce] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ds-accent, #f97316), var(--ds-accent-active, #ea580c));
    color: var(--ds-text-inverse, #fff);
    font-size: 1.2rem;
    box-shadow: var(--ds-glow-sm, 0 0 20px rgba(249, 115, 22, .22));
}

.perm-lead[b-l7ybuw9fce] {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ds-text-muted, #9c948a);
    max-width: 52ch;
}

.perm-code[b-l7ybuw9fce] {
    font-size: .85em;
    padding: .1rem .35rem;
    border-radius: 6px;
    background: var(--ds-accent-dim, rgba(249, 115, 22, .12));
    border: 1px solid var(--ds-border, #3d342c);
    color: var(--ds-accent, #f97316);
}

.perm-link[b-l7ybuw9fce] {
    color: var(--ds-accent, #f97316);
    font-weight: 700;
    text-decoration: none;
}
.perm-link:hover[b-l7ybuw9fce] { text-decoration: underline; }

.perm-btn-primary[b-l7ybuw9fce] {
    display: inline-flex;
    align-items: center;
    padding: .65rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    color: var(--ds-text-inverse, #fff);
    background: linear-gradient(135deg, var(--ds-accent, #f97316), var(--ds-accent-active, #ea580c));
    box-shadow: var(--ds-glow-sm, 0 0 20px rgba(249, 115, 22, .22));
    border: none;
    white-space: nowrap;
}
.perm-btn-primary:hover[b-l7ybuw9fce] {
    filter: brightness(1.06);
    color: var(--ds-text-inverse, #fff);
}

.perm-stats[b-l7ybuw9fce] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.perm-stat[b-l7ybuw9fce] {
    flex: 1;
    min-width: 120px;
    padding: .85rem 1rem;
    border-radius: 16px;
    background: var(--ds-bg-elevated, #252119);
    border: 1px solid var(--ds-border, #3d342c);
    text-align: center;
}

.perm-stat--total[b-l7ybuw9fce] {
    border-color: var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
}

.perm-stat--ok[b-l7ybuw9fce] {
    border-color: var(--ds-success, #3fb950);
    background: var(--ds-success-dim, rgba(63, 185, 80, .12));
}

.perm-stat--jwt[b-l7ybuw9fce] {
    border-color: var(--ds-accent, #f97316);
    background: var(--ds-info-dim, rgba(251, 146, 60, .12));
}

.perm-stat-val[b-l7ybuw9fce] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ds-text, #fefdfb);
}

.perm-stat-lbl[b-l7ybuw9fce] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ds-text-muted, #9c948a);
}

.perm-stat--ok .perm-stat-lbl[b-l7ybuw9fce] { color: var(--ds-success, #3fb950); }
.perm-stat--jwt .perm-stat-lbl[b-l7ybuw9fce] { color: var(--ds-info, #fb923c); }

.perm-token[b-l7ybuw9fce] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: rgba(15, 118, 110, .06);
    border: 1px dashed rgba(13, 148, 136, .35);
}

.perm-token-label[b-l7ybuw9fce] {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ds-accent, #f97316);
    flex-shrink: 0;
}

.perm-token-tags[b-l7ybuw9fce] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 0;
}

.perm-tag[b-l7ybuw9fce] {
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 8px;
    background: var(--ds-bg-surface, #1c1916);
    border: 1px solid var(--ds-border, #3d342c);
    color: var(--ds-text, #fefdfb);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.perm-tag--more[b-l7ybuw9fce] {
    background: var(--ds-accent-dim, rgba(249, 115, 22, .15));
    border-color: var(--ds-accent, #f97316);
    color: var(--ds-accent-hover, #fb923c);
}

.perm-empty-token[b-l7ybuw9fce] {
    font-size: .88rem;
    color: var(--ds-text-muted, #9c948a);
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: rgba(251, 191, 36, .1);
    border: 1px solid rgba(251, 191, 36, .35);
}

.perm-search-wrap[b-l7ybuw9fce] {
    position: relative;
    margin-bottom: 1rem;
}

.perm-search-ico[b-l7ybuw9fce] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-text-muted, #9c948a);
    pointer-events: none;
    font-size: 1rem;
}

.perm-search[b-l7ybuw9fce] {
    width: 100%;
    padding: .85rem 2.5rem .85rem 2.65rem;
    border-radius: 999px;
    border: 1.5px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-elevated, #252119);
    color: var(--ds-text, #fefdfb);
    font-size: .95rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.perm-search[b-l7ybuw9fce]::placeholder {
    color: var(--ds-text-muted, #9c948a);
}

.perm-search:focus[b-l7ybuw9fce] {
    border-color: var(--ds-border-focus, #fb923c);
    box-shadow: var(--ds-shadow-focus, 0 0 0 3px var(--ds-accent-ring));
}

.perm-search-clear[b-l7ybuw9fce] {
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: var(--ds-bg-surface, #1c1916);
    color: var(--ds-text-muted, #9c948a);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.perm-search-clear:hover[b-l7ybuw9fce] { background: var(--ds-border, #3d342c); color: var(--ds-text, #fefdfb); }

/* ── Liste type menu : secteurs + lignes (calqué sur NavMenu.razor.css) ── */
.perm-pnav[b-l7ybuw9fce] {
    margin: 0;
    padding: .35rem .25rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
}

.perm-pnav-sector[b-l7ybuw9fce] {
    margin: .1rem 0;
}

.perm-pnav-sector-head[b-l7ybuw9fce] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem .45rem .85rem;
    pointer-events: none;
}

.perm-pnav-dot[b-l7ybuw9fce] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.perm-pnav-sector-title[b-l7ybuw9fce] {
    font-size: .68rem;
    font-weight: 700;
    color: #fb923c;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.perm-pnav-sector-body[b-l7ybuw9fce] {
    padding-bottom: .35rem;
    background: linear-gradient(180deg, rgba(249, 115, 22, .04) 0%, transparent 100%);
    border-radius: 0 0 10px 10px;
}

.perm-pnav-item[b-l7ybuw9fce] {
    padding: 0 .6rem;
    margin-bottom: 1px;
}

.perm-pnav-row[b-l7ybuw9fce] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .52rem .8rem;
    border-radius: 9px;
    color: rgba(255, 251, 247, .88);
    font-size: .82rem;
    font-weight: 500;
    transition: background .14s, color .14s, border-color .14s, box-shadow .2s ease;
    border: 1px solid transparent;
    position: relative;
    min-width: 0;
}

.perm-pnav-row:hover[b-l7ybuw9fce] {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    border-color: rgba(255, 237, 213, .22);
    box-shadow: 0 0 18px rgba(249, 115, 22, .18);
}

.perm-pnav-row--on[b-l7ybuw9fce] {
    border-left: 3px solid rgba(63, 185, 80, .65);
    padding-left: calc(.8rem - 2px);
}

.perm-pnav-icon[b-l7ybuw9fce] {
    width: 20px;
    text-align: center;
    font-size: .88rem;
    color: rgba(255, 250, 245, .72);
    flex-shrink: 0;
    transition: color .14s;
}

.perm-pnav-row:hover .perm-pnav-icon[b-l7ybuw9fce] {
    color: #ffffff;
}

.perm-pnav-label[b-l7ybuw9fce] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.perm-switch[b-l7ybuw9fce] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.perm-switch-input[b-l7ybuw9fce] {
    appearance: none;
    width: 2.55rem;
    height: 1.38rem;
    border-radius: 999px;
    background: rgba(61, 52, 44, .95);
    border: 1px solid var(--ds-border, #3d342c);
    position: relative;
    cursor: pointer;
    transition: background .18s, border-color .18s;
    flex-shrink: 0;
}

.perm-switch-input:disabled[b-l7ybuw9fce] {
    opacity: .45;
    cursor: wait;
}

.perm-switch-input:checked[b-l7ybuw9fce] {
    background: rgba(34, 197, 94, .45);
    border-color: rgba(74, 222, 128, .55);
}

.perm-switch-input[b-l7ybuw9fce]::after {
    content: "";
    position: absolute;
    width: 1.08rem;
    height: 1.08rem;
    border-radius: 50%;
    background: #fffefb;
    top: 50%;
    left: 0.14rem;
    transform: translateY(-50%);
    transition: transform .18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.perm-switch-input:checked[b-l7ybuw9fce]::after {
    transform: translate(1.12rem, -50%);
}

.perm-pnav-open[b-l7ybuw9fce] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: rgba(251, 146, 60, .12);
    color: #fb923c;
    font-size: .85rem;
    flex-shrink: 0;
    text-decoration: none;
}

.perm-pnav-row:hover .perm-pnav-open[b-l7ybuw9fce] {
    background: rgba(249, 115, 22, .22);
    color: #fdba74;
}

.perm-feedback[b-l7ybuw9fce] {
    margin-bottom: 1rem;
    padding: .7rem 1rem;
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.45;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #fecaca;
}

.perm-no-result[b-l7ybuw9fce] {
    text-align: center;
    color: var(--ds-text-muted, #9c948a);
    padding: 2rem;
    font-size: .95rem;
}

.perm-boutique-inactive[b-l7ybuw9fce] {
    margin-left: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f87171;
    vertical-align: middle;
}

@media (max-width: 640px) {
    .perm-pnav-open[b-l7ybuw9fce] {
        display: none;
    }
}
/* /Pages/Production.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   VOLCHIC — Production / Calculateur de Montage
   ═══════════════════════════════════════════════════════════════ */

.prod-page[b-j1weyhiec9] {
    padding: 1.5rem;
    max-width: 1400px;
}

/* ── Header ──────────────────────────────────────────────────── */
.prod-header[b-j1weyhiec9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.prod-title[b-j1weyhiec9] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
}

.prod-sub[b-j1weyhiec9] {
    font-size: .78rem;
    color: var(--ds-text-muted);
    margin: .2rem 0 0;
    max-width: 52rem;
    line-height: 1.45;
}
.prod-process-hint[b-j1weyhiec9] {
    display: block;
    margin-top: .35rem;
    font-size: .72rem;
    color: var(--ds-text-sub);
}
.prod-process-link[b-j1weyhiec9] {
    color: var(--ds-accent);
    font-weight: 700;
    text-decoration: none;
}
.prod-process-link:hover[b-j1weyhiec9] {
    text-decoration: underline;
}

.prod-header-stats[b-j1weyhiec9] {
    display: flex;
    gap: .6rem;
}

.prod-stat-pill[b-j1weyhiec9] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 600;
}

.prod-stat-pill.green[b-j1weyhiec9] { background: rgba(52,211,153,.1); color: #34d399; border: 1px solid rgba(52,211,153,.2); }
.prod-stat-pill.blue[b-j1weyhiec9]  { background: rgba(249,115,22,.1); color: #fb923c; border: 1px solid rgba(249,115,22,.2); }

/* ── Main layout ─────────────────────────────────────────────── */
.calc-wrapper[b-j1weyhiec9] {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (max-width: 1100px) {
    .calc-wrapper[b-j1weyhiec9] { grid-template-columns: 1fr; }
}

/* ── Shared card base ────────────────────────────────────────── */
.calc-inputs-card[b-j1weyhiec9],
.calc-result-card[b-j1weyhiec9],
.calc-stock-mini[b-j1weyhiec9] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
}

.calc-card-head[b-j1weyhiec9] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--ds-border);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ds-text);
}

.text-orange[b-j1weyhiec9] { color: #f97316; }
.text-blue[b-j1weyhiec9]   { color: #fb923c; }
.text-green[b-j1weyhiec9]  { color: #34d399; }

/* ── Fields ──────────────────────────────────────────────────── */
.calc-field[b-j1weyhiec9] {
    padding: 1rem 1.1rem 0;
}

.calc-field:last-child[b-j1weyhiec9] { padding-bottom: 1.1rem; }

.calc-label[b-j1weyhiec9] {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .5rem;
}

.calc-select[b-j1weyhiec9] {
    width: 100%;
    background: var(--ds-bg-app);
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    padding: .6rem .85rem;
    font-size: .84rem;
    color: var(--ds-text);
    outline: none;
    transition: border-color .15s;
}

.calc-select:focus[b-j1weyhiec9] { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.1); }
.calc-select option[b-j1weyhiec9] { background: var(--ds-bg-app); }

/* ── Rule buttons (EDT / EDP / Parfum / Huile) ───────────────── */
.calc-rule-grid[b-j1weyhiec9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.calc-rule-btn[b-j1weyhiec9] {
    background: transparent;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    padding: .65rem .4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    cursor: pointer;
    transition: all .15s;
}

.calc-rule-btn:hover[b-j1weyhiec9] { border-color: #f97316; background: rgba(249,115,22,.04); }

.calc-rule-btn.active[b-j1weyhiec9] {
    background: rgba(249,115,22,.12);
    border-color: #f97316;
    box-shadow: 0 0 12px rgba(249,115,22,.2);
}

.rule-name[b-j1weyhiec9] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ds-text-sub);
}

.rule-pct[b-j1weyhiec9] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #f97316;
}

.rule-desc[b-j1weyhiec9] {
    font-size: .6rem;
    color: var(--ds-text-muted);
}

.calc-rule-btn.active .rule-name[b-j1weyhiec9] { color: #f97316; }

/* ── Percentage slider ───────────────────────────────────────── */
.calc-pct-badge[b-j1weyhiec9] {
    display: inline-block;
    background: rgba(249,115,22,.2);
    color: #f97316;
    padding: .1rem .45rem;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 700;
    margin-left: .4rem;
    text-transform: none;
    letter-spacing: 0;
}

.calc-range[b-j1weyhiec9] {
    width: 100%;
    accent-color: #f97316;
    cursor: pointer;
    margin: .3rem 0 .2rem;
}

.calc-range-labels[b-j1weyhiec9] {
    display: flex;
    justify-content: space-between;
    font-size: .6rem;
    color: var(--ds-text-muted);
}

/* ── Big oil input ───────────────────────────────────────────── */
.calc-input-big-wrap[b-j1weyhiec9] {
    position: relative;
    display: flex;
    align-items: center;
}

.calc-input-icon[b-j1weyhiec9] {
    position: absolute;
    left: .9rem;
    font-size: 1.1rem;
    pointer-events: none;
}

.calc-input-big[b-j1weyhiec9] {
    width: 100%;
    background: var(--ds-bg-app);
    border: 2px solid var(--ds-border);
    border-radius: 11px;
    padding: .85rem 3rem .85rem 2.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f97316;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.calc-input-big:focus[b-j1weyhiec9] {
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249,115,22,.12);
}

.calc-input-big[b-j1weyhiec9]::placeholder { color: var(--ds-text-muted); font-weight: 400; font-size: 1rem; }

.calc-input-unit[b-j1weyhiec9] {
    position: absolute;
    right: .9rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    pointer-events: none;
}

/* ── Quick amount buttons ────────────────────────────────────── */
.calc-quick-btns[b-j1weyhiec9] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.calc-quick-btn[b-j1weyhiec9] {
    padding: .3rem .7rem;
    border-radius: 7px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .13s;
}

.calc-quick-btn:hover[b-j1weyhiec9]  { border-color: #f97316; color: #f97316; }
.calc-quick-btn.active[b-j1weyhiec9] { background: rgba(249,115,22,.15); border-color: #f97316; color: #f97316; }

/* ── Calculer button ─────────────────────────────────────────── */
.calc-btn-row[b-j1weyhiec9] {
    padding: 1rem 1.1rem 1.1rem;
    border-top: 1px solid var(--ds-border);
    margin-top: .75rem;
}

.calc-btn-main[b-j1weyhiec9] {
    width: 100%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: .85rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(249,115,22,.35);
    transition: all .15s;
    letter-spacing: .02em;
}

.calc-btn-main:hover:not(:disabled)[b-j1weyhiec9] {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(249,115,22,.45);
}

.calc-btn-main:disabled[b-j1weyhiec9] {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

/* ── RIGHT PANEL ─────────────────────────────────────────────── */
.calc-result-panel[b-j1weyhiec9] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ── Big formula display ─────────────────────────────────────── */
.calc-big-formula[b-j1weyhiec9] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1rem;
    flex-wrap: wrap;
}

.calc-big-item[b-j1weyhiec9] {
    flex: 1;
    min-width: 90px;
    background: var(--ds-bg-app);
    border-radius: 14px;
    padding: 1.1rem .6rem;
    text-align: center;
    border: 2px solid var(--ds-border);
    transition: border-color .2s;
}

.calc-big-item.orange[b-j1weyhiec9] { border-color: rgba(249,115,22,.35); }
.calc-big-item.blue[b-j1weyhiec9]   { border-color: rgba(249,115,22,.35); }
.calc-big-item.green[b-j1weyhiec9]  { border-color: rgba(52,211,153,.35); }

.calc-big-item i[b-j1weyhiec9] {
    font-size: 1.4rem;
    display: block;
    margin-bottom: .4rem;
}

.calc-big-item.orange i[b-j1weyhiec9] { color: #f97316; }
.calc-big-item.blue   i[b-j1weyhiec9] { color: #fb923c; }
.calc-big-item.green  i[b-j1weyhiec9] { color: #34d399; }

.calc-big-val[b-j1weyhiec9] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ds-text);
    line-height: 1.1;
}

.calc-big-lbl[b-j1weyhiec9] {
    font-size: .64rem;
    color: var(--ds-text-muted);
    margin-top: .2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.calc-big-pct[b-j1weyhiec9] {
    font-size: .66rem;
    color: var(--ds-text-muted);
    margin-top: .2rem;
}

.calc-plus[b-j1weyhiec9], .calc-equals[b-j1weyhiec9] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    flex-shrink: 0;
}

/* ── Formula explanation box ─────────────────────────────────── */
.calc-formula-box[b-j1weyhiec9] {
    margin: 0 1rem 1rem;
    background: var(--ds-bg-app);
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.calc-formula-line[b-j1weyhiec9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    color: var(--ds-text-muted);
    gap: .5rem;
}

.calc-formula-line code[b-j1weyhiec9] {
    background: rgba(249,115,22,.08);
    color: var(--ds-text-sub);
    padding: .15rem .5rem;
    border-radius: 5px;
    font-size: .73rem;
}

.calc-formula-line code strong[b-j1weyhiec9] { color: #f97316; }

/* ── Validate CTA ────────────────────────────────────────────── */
.calc-action[b-j1weyhiec9] {
    padding: 0 1rem 1rem;
}

.calc-btn-validate[b-j1weyhiec9] {
    width: 100%;
    background: linear-gradient(135deg,#f97316,#ea580c);
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: .85rem;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(249,115,22,.3);
    transition: all .15s;
}

.calc-btn-validate:hover[b-j1weyhiec9] { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Validate box ────────────────────────────────────────────── */
.calc-validate-box[b-j1weyhiec9] {
    background: var(--ds-bg-app);
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: 1rem;
}

.calc-vbox-title[b-j1weyhiec9] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ds-text);
    margin-bottom: .85rem;
}

.calc-vbox-fields[b-j1weyhiec9] { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .85rem; }

.calc-vfield label[b-j1weyhiec9] {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .3rem;
}

.calc-vbox-foot[b-j1weyhiec9] { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }

.calc-btn-cancel[b-j1weyhiec9] {
    padding: .5rem 1rem;
    background: transparent;
    border: 1px solid var(--ds-border);
    color: var(--ds-text-muted);
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
}

.calc-btn-ok[b-j1weyhiec9] {
    padding: .5rem 1.25rem;
    background: linear-gradient(135deg,#34d399,#059669);
    border: none;
    color: #fff;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.calc-btn-ok:disabled[b-j1weyhiec9] { opacity: .5; cursor: not-allowed; }

/* ── Alerts ──────────────────────────────────────────────────── */
.calc-alert-error[b-j1weyhiec9] {
    margin: .5rem 0 0;
    padding: .6rem .85rem;
    background: rgba(239,68,68,.08);
    color: #f87171;
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 8px;
    font-size: .78rem;
}

.calc-alert-ok[b-j1weyhiec9] {
    margin: .5rem 1rem 0;
    padding: .6rem .85rem;
    background: rgba(52,211,153,.08);
    color: #34d399;
    border: 1px solid rgba(52,211,153,.2);
    border-radius: 8px;
    font-size: .78rem;
    display: flex;
    align-items: center;
}

.calc-next-step[b-j1weyhiec9] {
    margin: .65rem 1rem 0;
    padding: .75rem .9rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    font-size: .78rem;
    color: var(--ds-text-sub);
}
.calc-next-step-title[b-j1weyhiec9] {
    font-weight: 800;
    color: var(--ds-text);
    margin-bottom: .25rem;
}
.calc-next-step-text[b-j1weyhiec9] {
    margin: 0 0 .55rem;
    line-height: 1.4;
}
.calc-next-step-btn[b-j1weyhiec9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem 1rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: .78rem;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.25);
    transition: filter 0.12s ease, transform 0.12s ease;
}
.calc-next-step-btn:hover[b-j1weyhiec9] {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #fff;
}
.calc-next-step-btns[b-j1weyhiec9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.calc-next-step-btn--secondary[b-j1weyhiec9] {
    background: var(--ds-bg-surface);
    color: var(--ds-accent);
    border: 1.5px solid var(--ds-accent);
    box-shadow: none;
}
.calc-next-step-btn--secondary:hover[b-j1weyhiec9] {
    background: rgba(249, 115, 22, 0.12);
    color: #fff;
    border-color: var(--ds-accent);
}

/* ── Empty state ─────────────────────────────────────────────── */
.calc-empty-state[b-j1weyhiec9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: .75rem;
    color: var(--ds-text-muted);
    font-size: .85rem;
    text-align: center;
}

.calc-empty-state p[b-j1weyhiec9] { margin: 0; }

/* ── Stock mini ──────────────────────────────────────────────── */
.calc-stock-list[b-j1weyhiec9] { padding: .5rem .75rem; }

.calc-stock-row[b-j1weyhiec9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem 0;
    border-bottom: 1px solid var(--ds-bg-surface);
    font-size: .78rem;
}

.calc-stock-row:last-child[b-j1weyhiec9] { border-bottom: none; }
.calc-stock-name[b-j1weyhiec9] { color: var(--ds-text-muted); }
.calc-stock-qty[b-j1weyhiec9]  { font-weight: 700; font-size: .8rem; }

.calc-stock-mini-head[b-j1weyhiec9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.calc-stock-mini-head-title[b-j1weyhiec9] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1;
    min-width: 0;
}

.calc-stock-mini-count[b-j1weyhiec9] {
    font-size: .68rem;
    font-weight: 700;
    padding: .12rem .4rem;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.calc-stock-refresh-btn[b-j1weyhiec9] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    background: var(--ds-bg-surface);
    color: var(--ds-text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.calc-stock-refresh-btn:hover:not(:disabled)[b-j1weyhiec9] {
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.45);
    background: var(--ds-bg-elevated);
}

.calc-stock-refresh-btn:disabled[b-j1weyhiec9] {
    opacity: .55;
    cursor: not-allowed;
}

.calc-stock-list-scroll[b-j1weyhiec9] {
    max-height: 14rem;
    overflow-y: auto;
}

.calc-stock-empty[b-j1weyhiec9] {
    padding: .85rem .75rem 1rem;
    font-size: .74rem;
    color: var(--ds-text-muted);
    line-height: 1.45;
}

.calc-stock-empty p[b-j1weyhiec9] { margin: 0 0 .5rem; }

.calc-stock-empty-hint[b-j1weyhiec9] {
    margin-bottom: .65rem !important;
    font-size: .7rem;
    opacity: .95;
}

.calc-stock-empty-link[b-j1weyhiec9] {
    color: #fb923c;
    font-weight: 600;
    text-decoration: none;
}

.calc-stock-empty-link:hover[b-j1weyhiec9] {
    text-decoration: underline;
}

.calc-stock-empty-retry[b-j1weyhiec9] {
    margin-top: .25rem;
    padding: .35rem .75rem;
    font-size: .72rem;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    background: var(--ds-bg-surface);
    color: var(--ds-text);
    cursor: pointer;
}

.calc-stock-empty-retry:hover:not(:disabled)[b-j1weyhiec9] {
    border-color: rgba(251, 146, 60, 0.5);
    color: #fb923c;
}

.calc-stock-empty-retry:disabled[b-j1weyhiec9] {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Spinner ─────────────────────────────────────────────────── */
.prod-spinner[b-j1weyhiec9] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-j1weyhiec9 .6s linear infinite;
    margin-right: .4rem;
}

@keyframes spin-b-j1weyhiec9 { to { transform: rotate(360deg); } }

/* ── History table ───────────────────────────────────────────── */
.prod-history[b-j1weyhiec9] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
}

.prod-history-head[b-j1weyhiec9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--ds-border);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ds-text);
    gap: 1rem;
}

.prod-search[b-j1weyhiec9] {
    width: 200px;
    background: var(--ds-bg-app);
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    padding: .38rem .75rem;
    font-size: .78rem;
    color: var(--ds-text);
    outline: none;
}

.prod-search:focus[b-j1weyhiec9] { border-color: #f97316; }

.prod-table-wrap[b-j1weyhiec9] { overflow-x: auto; }

.prod-table[b-j1weyhiec9] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.prod-table th[b-j1weyhiec9] {
    padding: .65rem 1rem;
    background: var(--ds-bg-app);
    color: var(--ds-text-muted);
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-align: left;
    border-bottom: 1px solid var(--ds-border);
    white-space: nowrap;
}

.prod-table td[b-j1weyhiec9] {
    padding: .65rem 1rem;
    color: var(--ds-text-sub);
    border-bottom: 1px solid var(--ds-bg-surface);
    vertical-align: middle;
}

.prod-table tbody tr:hover[b-j1weyhiec9] { background: rgba(255,255,255,.02); }

.prod-code[b-j1weyhiec9] {
    font-family: monospace;
    font-size: .73rem;
    background: rgba(249,115,22,.1);
    color: #f97316;
    padding: .15rem .4rem;
    border-radius: 5px;
}

.badge-orange[b-j1weyhiec9] {
    background: rgba(249,115,22,.12);
    color: #f97316;
    padding: .15rem .5rem;
    border-radius: 5px;
    font-size: .75rem;
    font-weight: 600;
}

.badge-blue[b-j1weyhiec9] {
    background: rgba(249,115,22,.12);
    color: #fb923c;
    padding: .15rem .5rem;
    border-radius: 5px;
    font-size: .75rem;
    font-weight: 600;
}

.text-orange[b-j1weyhiec9] { color: #f97316; }

.prod-status-badge[b-j1weyhiec9] {
    font-size: .62rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 6px;
    white-space: nowrap;
}

.prod-status-badge.green[b-j1weyhiec9]  { background: rgba(52,211,153,.12); color: #34d399; }
.prod-status-badge.orange[b-j1weyhiec9] { background: rgba(249,115,22,.12);  color: #f97316; }
.prod-status-badge.red[b-j1weyhiec9]    { background: rgba(239,68,68,.12);   color: #f87171; }

.prod-icon-btn[b-j1weyhiec9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    font-size: .8rem;
    cursor: pointer;
    transition: filter .13s;
}

.prod-icon-btn.orange[b-j1weyhiec9] { background: rgba(249,115,22,.12); color: #f97316; }
.prod-icon-btn.red[b-j1weyhiec9]    { background: rgba(239,68,68,.12);  color: #f87171; }
.prod-icon-btn.blue[b-j1weyhiec9]   { background: rgba(251,146,60,.12); color: #fb923c; }
.prod-icon-btn.green[b-j1weyhiec9]  { background: rgba(34,197,94,.14); color: #22c55e; text-decoration: none; }
.prod-icon-btn.violet[b-j1weyhiec9] { background: rgba(167,139,250,.14); color: #a78bfa; text-decoration: none; }
.prod-icon-btn:hover[b-j1weyhiec9]  { filter: brightness(1.25); }

/* ══════════════════════════════════════════
   MODAL IMPRESSION TICKET PRODUCTION
   ══════════════════════════════════════════ */
.print-overlay[b-j1weyhiec9] {
    position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 1500;
    display: flex; align-items: center; justify-content: center;
    animation: fadeInPrint .15s ease;
}
@@keyframes fadeInPrint { from[b-j1weyhiec9]{opacity:0} to[b-j1weyhiec9]{opacity:1} }

.print-modal[b-j1weyhiec9] {
    background: var(--ds-bg-app); border: 1px solid var(--ds-border); border-radius: 16px;
    width: 680px; max-width: 96vw; max-height: 92vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    animation: slideUpPrint .18s ease;
}
@@keyframes slideUpPrint { from[b-j1weyhiec9]{transform:translateY(24px);opacity:0} to[b-j1weyhiec9]{transform:translateY(0);opacity:1} }

.print-modal-head[b-j1weyhiec9] {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.25rem; border-bottom: 1px solid var(--ds-border); flex-shrink: 0;
}
.print-btn-action[b-j1weyhiec9] {
    padding: .42rem 1rem; border: none; border-radius: 8px; font-size: .82rem;
    font-weight: 700; cursor: pointer; display: flex; align-items: center; transition: all .12s;
}
.print-btn-action.blue[b-j1weyhiec9] { background: linear-gradient(135deg,#f97316,#ea580c); color: #fff; box-shadow: 0 4px 10px rgba(249,115,22,.3); }
.print-btn-action.green[b-j1weyhiec9] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.28);
    text-decoration: none;
}
.print-btn-action.violet[b-j1weyhiec9] {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.28);
    text-decoration: none;
}
.print-btn-action:hover[b-j1weyhiec9] { filter: brightness(1.1); transform: translateY(-1px); }
.print-btn-close[b-j1weyhiec9] {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ds-border);
    background: transparent; color: var(--ds-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
.print-btn-close:hover[b-j1weyhiec9] { background: rgba(248,113,113,.1); color: #f87171; }

/* ── Ticket ── */
.print-ticket[b-j1weyhiec9] {
    overflow-y: auto; padding: 1.5rem; background: var(--ds-bg-surface);
    flex: 1;
}

.pt-header[b-j1weyhiec9] {
    display: flex; justify-content: space-between; align-items: flex-start;
}
.pt-brand-name[b-j1weyhiec9] {
    font-size: 1.5rem; font-weight: 900; color: #f97316; letter-spacing: .08em;
    display: block;
}
.pt-brand-sub[b-j1weyhiec9] {
    font-size: .72rem; color: var(--ds-text-muted); letter-spacing: .05em; display: block; margin-top: .1rem;
}
.pt-batch-id[b-j1weyhiec9] { text-align: right; }
.pt-batch-label[b-j1weyhiec9] { font-size: .6rem; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .1em; }
.pt-batch-val[b-j1weyhiec9] {
    font-family: 'Courier New', monospace; font-size: .82rem; font-weight: 700;
    color: #fb923c; margin-top: .2rem; background: rgba(251,146,60,.08);
    padding: .2rem .5rem; border-radius: 6px; border: 1px solid rgba(251,146,60,.2);
}

.pt-divider[b-j1weyhiec9] { border: none; border-top: 1px solid var(--ds-border); margin: .85rem 0; }

.pt-section-title[b-j1weyhiec9] {
    font-size: .62rem; font-weight: 800; color: var(--ds-text-muted); letter-spacing: .1em;
    text-transform: uppercase; margin-bottom: .6rem;
}

.pt-grid-2[b-j1weyhiec9] { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.pt-grid-3[b-j1weyhiec9] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .65rem; }

.pt-info-block[b-j1weyhiec9] {
    background: var(--ds-bg-app); border: 1px solid var(--ds-border); border-radius: 10px;
    padding: .6rem .85rem;
}
.pt-info-label[b-j1weyhiec9] { font-size: .62rem; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.pt-info-val[b-j1weyhiec9]   { font-size: .88rem; font-weight: 700; color: var(--ds-text); }
.pt-info-val.orange[b-j1weyhiec9] { color: #f97316; }

/* Formula */
.pt-formula-box[b-j1weyhiec9] {
    display: flex; align-items: center; justify-content: center;
    gap: .85rem; background: var(--ds-bg-app); border: 1px solid var(--ds-border);
    border-radius: 12px; padding: .85rem 1rem; flex-wrap: wrap;
}
.pt-formula-item[b-j1weyhiec9] { display: flex; align-items: center; gap: .55rem; }
.pt-formula-icon[b-j1weyhiec9] { font-size: 1.4rem; }
.pt-formula-label[b-j1weyhiec9] { font-size: .65rem; color: var(--ds-text-muted); }
.pt-formula-val[b-j1weyhiec9] { font-size: 1rem; font-weight: 800; }
.pt-formula-val.orange[b-j1weyhiec9] { color: #f97316; }
.pt-formula-val.blue[b-j1weyhiec9]   { color: #fb923c; }
.pt-formula-val.green[b-j1weyhiec9]  { color: #34d399; }
.pt-formula-plus[b-j1weyhiec9],.pt-formula-eq[b-j1weyhiec9] {
    font-size: 1.3rem; font-weight: 700; color: var(--ds-text-muted); flex-shrink: 0;
}

/* Stats */
.pt-stat-block[b-j1weyhiec9] {
    background: var(--ds-bg-app); border: 1px solid var(--ds-border); border-radius: 10px;
    padding: .65rem .85rem; text-align: center;
}
.pt-stat-label[b-j1weyhiec9] { font-size: .6rem; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.pt-stat-val[b-j1weyhiec9]   { font-size: 1rem; font-weight: 800; }
.pt-stat-val.orange[b-j1weyhiec9] { color: #f97316; }
.pt-stat-val.green[b-j1weyhiec9]  { color: #34d399; }
.pt-stat-val.blue[b-j1weyhiec9]   { color: #fb923c; }

/* Notes */
.pt-notes[b-j1weyhiec9] {
    background: var(--ds-bg-app); border: 1px solid var(--ds-border); border-radius: 10px;
    padding: .65rem .85rem; font-size: .82rem; color: var(--ds-text-sub); font-style: italic;
}

/* Steps */
.pt-steps[b-j1weyhiec9] { display: flex; flex-direction: column; gap: .45rem; }
.pt-step[b-j1weyhiec9]  { display: flex; align-items: flex-start; gap: .65rem; font-size: .8rem; color: var(--ds-text-sub); }
.pt-step-num[b-j1weyhiec9] {
    width: 22px; height: 22px; border-radius: 50%; background: rgba(249,115,22,.15);
    color: #f97316; font-size: .7rem; font-weight: 800; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(249,115,22,.3);
}

/* Barcode */
.pt-barcode-zone[b-j1weyhiec9] { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .5rem 0; }
.pt-barcode-bars[b-j1weyhiec9] { display: flex; align-items: flex-end; }
.pt-barcode-meta[b-j1weyhiec9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    text-align: center;
    max-width: 100%;
    padding: 0 .5rem;
}
.pt-barcode-parfum[b-j1weyhiec9] {
    font-size: .8rem;
    font-weight: 800;
    color: var(--ds-text);
    line-height: 1.25;
    word-break: break-word;
}
.pt-barcode-id[b-j1weyhiec9] {
    font-size: .66rem;
    font-weight: 700;
    color: var(--ds-accent);
    letter-spacing: .02em;
}
.pt-barcode-batch-row[b-j1weyhiec9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .12rem;
    margin-top: .2rem;
}
.pt-barcode-batch-label[b-j1weyhiec9] {
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ds-text-muted);
}
.pt-barcode-text[b-j1weyhiec9] { font-family: 'Courier New', monospace; font-size: .68rem; color: var(--ds-text-muted); letter-spacing: .12em; }

/* Footer */
.pt-footer[b-j1weyhiec9] {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .65rem; color: var(--ds-text-muted); border-top: 1px solid var(--ds-border);
    margin-top: .85rem; padding-top: .6rem; flex-wrap: wrap; gap: .3rem;
}

/* ── Admin : règles par parfum ───────────────────────────────── */
.prod-admin-presets[b-j1weyhiec9] {
    background: linear-gradient(145deg, rgba(249,115,22,.08), rgba(59,130,246,.06));
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.prod-admin-presets-head[b-j1weyhiec9] {
    margin-bottom: 1rem;
}

.prod-admin-title[b-j1weyhiec9] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: var(--ds-text);
}

.prod-admin-sub[b-j1weyhiec9] {
    margin: 0;
    font-size: .78rem;
    color: var(--ds-text-muted);
    max-width: 52rem;
    line-height: 1.45;
}

.prod-admin-presets-grid[b-j1weyhiec9] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .prod-admin-presets-grid[b-j1weyhiec9] {
        grid-template-columns: 1fr;
    }
}

.prod-admin-form[b-j1weyhiec9] {
    background: var(--ds-surface, rgba(22,27,34,.65));
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: 1rem;
}

.prod-admin-table-wrap[b-j1weyhiec9] {
    background: var(--ds-surface, rgba(22,27,34,.45));
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: 0.75rem 1rem 1rem;
    overflow-x: auto;
}

.prod-agent-preset-readonly[b-j1weyhiec9] {
    display: grid;
    gap: .45rem;
    padding: .75rem 1rem;
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 10px;
    font-size: .82rem;
}

.prod-agent-preset-readonly strong[b-j1weyhiec9] {
    color: var(--ds-text);
}

.prod-bottle-catalog[b-j1weyhiec9] {
    margin-top: .65rem;
    border-radius: 10px;
    border: 1px dashed rgba(249,115,22,.35);
    background: rgba(0,0,0,.12);
}

.prod-bottle-catalog-summary[b-j1weyhiec9] {
    cursor: pointer;
    list-style: none;
    font-size: .72rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    padding: .45rem .55rem;
}

.prod-bottle-catalog-summary[b-j1weyhiec9]::-webkit-details-marker { display: none; }

.prod-bottle-catalog-body[b-j1weyhiec9] {
    padding: 0 .65rem .65rem;
    border-top: 1px solid var(--ds-border);
}

.prod-bottle-catalog-hint[b-j1weyhiec9] {
    font-size: .68rem;
    color: var(--ds-text-muted);
    margin: .5rem 0 .4rem;
    line-height: 1.4;
}

.prod-bottle-catalog-msg[b-j1weyhiec9] {
    font-size: .72rem;
    margin-bottom: .45rem;
    padding: .35rem .5rem;
}

.prod-bottle-catalog-list[b-j1weyhiec9] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.prod-bottle-catalog-item[b-j1weyhiec9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    padding: .25rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.prod-bottle-catalog-item:last-child[b-j1weyhiec9] { border-bottom: none; }

.prod-bottle-catalog-item-pending[b-j1weyhiec9] {
    flex-wrap: wrap;
    align-items: flex-start;
}

.prod-bottle-catalog-pending[b-j1weyhiec9] {
    font-size: .68rem;
    color: var(--ds-text-muted);
    font-weight: 500;
    flex: 1 1 100%;
    margin: .15rem 0 0;
    line-height: 1.35;
}

.prod-bottle-catalog-addnow[b-j1weyhiec9] {
    margin-top: .35rem;
    font-size: .72rem !important;
    padding: .25rem .55rem !important;
}

.prod-bottle-catalog-input[b-j1weyhiec9] {
    max-width: 5.5rem;
    padding: .25rem .4rem !important;
    font-size: .78rem !important;
}

.prod-bottle-catalog-add[b-j1weyhiec9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
    padding-top: .45rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ── Tableau de personnalisation des parfums ────────────────── */
.prod-personalization-card[b-j1weyhiec9] {
    margin-bottom: 1.25rem;
}

.prod-personalization-add-row[b-j1weyhiec9] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 7rem auto;
    gap: .65rem .75rem;
    align-items: end;
}

@@media (max-width: 720px) {
    .prod-personalization-add-row[b-j1weyhiec9] {
        grid-template-columns: 1fr;
    }

    .prod-personalization-cell--pct[b-j1weyhiec9] {
        max-width: 10rem;
    }

    .prod-personalization-add-btn[b-j1weyhiec9] {
        width: 100%;
        justify-content: center;
    }
}

.prod-personalization-add-btn[b-j1weyhiec9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .55rem .85rem !important;
    font-size: .78rem !important;
    white-space: nowrap;
}

.prod-personalization-table th[b-j1weyhiec9] {
    font-size: .62rem;
}

/* ── Huiles fragrance (carte pleine largeur) ─────────────────── */
.prod-montage-oils-card[b-j1weyhiec9] {
    margin-bottom: 1.25rem;
}

.calc-card-head--spread[b-j1weyhiec9] {
    justify-content: space-between;
    gap: .5rem;
}

.calc-card-head-title[b-j1weyhiec9] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.prod-montage-in-card-scroll[b-j1weyhiec9] {
    max-height: 20rem;
    overflow: auto;
}

.prod-montage-code[b-j1weyhiec9] {
    font-family: ui-monospace, monospace;
    font-size: .72rem;
    padding: .1rem .35rem;
    border-radius: 4px;
    background: rgba(0,0,0,.2);
    color: var(--ds-text);
}

.prod-montage-link[b-j1weyhiec9] {
    color: var(--ds-accent);
    font-weight: 600;
    text-decoration: none;
}
.prod-montage-link:hover[b-j1weyhiec9] {
    text-decoration: underline;
}

.prod-montage-count-pill[b-j1weyhiec9] {
    font-size: .68rem;
    font-weight: 700;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: rgba(249, 115, 22, .12);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, .25);
}

/* ── Print media ── */
@@media print {
    .print-overlay[b-j1weyhiec9] { position: static; background: none; }
    .print-modal[b-j1weyhiec9] { border: none; box-shadow: none; background: #fff; color: #000; max-height: none; }
    .print-modal-head[b-j1weyhiec9] { display: none; }
    .print-ticket[b-j1weyhiec9] { background: #fff; color: #000; overflow: visible; }
    .pt-brand-name[b-j1weyhiec9] { color: #d97706 !important; }
    .pt-batch-val[b-j1weyhiec9],.pt-formula-val.orange[b-j1weyhiec9],.pt-stat-val.orange[b-j1weyhiec9] { color: #d97706 !important; }
    .pt-formula-val.blue[b-j1weyhiec9],.pt-stat-val.blue[b-j1weyhiec9] { color: #ea580c !important; }
    .pt-formula-val.green[b-j1weyhiec9],.pt-stat-val.green[b-j1weyhiec9] { color: #059669 !important; }
    .pt-info-block[b-j1weyhiec9],.pt-stat-block[b-j1weyhiec9],.pt-formula-box[b-j1weyhiec9],.pt-notes[b-j1weyhiec9] { background: #f9fafb !important; border-color: #e5e7eb !important; }
    .pt-section-title[b-j1weyhiec9] { color: #6b7280 !important; }
    .pt-step-num[b-j1weyhiec9] { background: #fef3c7 !important; border-color: #f59e0b !important; }
    .pt-footer[b-j1weyhiec9] { color: #9ca3af !important; border-color: #e5e7eb !important; }
    .pt-barcode-bars div[b-j1weyhiec9] { background: #111 !important; }
    .pt-barcode-text[b-j1weyhiec9],.pt-batch-label[b-j1weyhiec9],.pt-info-label[b-j1weyhiec9],.pt-stat-label[b-j1weyhiec9],.pt-formula-label[b-j1weyhiec9],.pt-barcode-batch-label[b-j1weyhiec9] { color: #6b7280 !important; }
    .pt-barcode-parfum[b-j1weyhiec9] { color: #111 !important; }
    .pt-barcode-id[b-j1weyhiec9] { color: #c2410c !important; }
    .pt-brand-sub[b-j1weyhiec9] { color: #6b7280 !important; }
    .pt-divider[b-j1weyhiec9] { border-color: #e5e7eb !important; }
}
/* /Pages/QualiteControl.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   VOLCHIC — Contrôle Qualité — ISO Industrial Design
   ═══════════════════════════════════════════════════════════════ */

.qa-page[b-dxafsoyl84] {
    padding: 1.25rem;
    max-width: 1500px;
}

/* ── Header ──────────────────────────────────────────────────── */
.qa-header[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.qa-title[b-dxafsoyl84] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
}

.qa-sub[b-dxafsoyl84] {
    font-size: .75rem;
    color: var(--ds-text-muted);
    margin: .2rem 0 0;
    max-width: 48rem;
    line-height: 1.45;
}
.qa-sub strong[b-dxafsoyl84] { color: var(--ds-text-sub); }
.qa-sub-link[b-dxafsoyl84] {
    color: var(--ds-accent);
    font-weight: 700;
    text-decoration: none;
}
.qa-sub-link:hover[b-dxafsoyl84] { text-decoration: underline; }

.qa-code-ticket[b-dxafsoyl84] { color: #60a5fa; }

.qa-chain-card[b-dxafsoyl84] {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 12px;
}
.qa-chain-head[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ds-text-muted);
    margin-bottom: .55rem;
}
.qa-chain-grid[b-dxafsoyl84] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}
@media (max-width: 720px) {
    .qa-chain-grid[b-dxafsoyl84] { grid-template-columns: 1fr; }
}
.qa-chain-cell[b-dxafsoyl84] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .78rem;
}
.qa-chain-lbl[b-dxafsoyl84] {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ds-text-muted);
}
.qa-chain-hint[b-dxafsoyl84] {
    display: block;
    font-size: .62rem;
    color: var(--ds-text-muted);
    font-weight: 500;
}
.qa-chain-actions[b-dxafsoyl84] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .65rem;
}
.qa-chain-btn[b-dxafsoyl84] {
    display: inline-flex;
    align-items: center;
    padding: .32rem .75rem;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--ds-border);
    color: var(--ds-text);
    background: var(--ds-bg-surface);
    transition: border-color 0.12s ease, color 0.12s ease;
}
.qa-chain-btn:hover[b-dxafsoyl84] {
    border-color: var(--ds-accent);
    color: var(--ds-accent);
}
.qa-chain-btn.accent[b-dxafsoyl84] {
    border-color: rgba(249, 115, 22, 0.45);
    color: #fb923c;
    background: rgba(249, 115, 22, 0.08);
}
.qa-chain-btn.accent:hover[b-dxafsoyl84] {
    color: #fff;
    background: var(--ds-accent, #f97316);
    border-color: var(--ds-accent);
}

.qa-header-tabs[b-dxafsoyl84] {
    display: flex;
    gap: .4rem;
    background: var(--ds-bg-app);
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: .3rem;
}

.qa-tab[b-dxafsoyl84] {
    padding: .45rem 1rem;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--ds-text-muted);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
}

.qa-tab:hover[b-dxafsoyl84] { background: rgba(255,255,255,.05); color: var(--ds-text-sub); }
.qa-tab.active[b-dxafsoyl84] { background: rgba(249,115,22,.15); color: #f97316; }

/* ── KPI Grid ────────────────────────────────────────────────── */
.qa-kpi-grid[b-dxafsoyl84] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) { .qa-kpi-grid[b-dxafsoyl84] { grid-template-columns: repeat(2, 1fr); } }

.qa-kpi[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    transition: border-color .2s;
}

.qa-kpi:hover[b-dxafsoyl84] { border-color: var(--ds-text-muted); }
.qa-kpi.green[b-dxafsoyl84]  { border-left: 3px solid #34d399; }
.qa-kpi.red[b-dxafsoyl84]    { border-left: 3px solid #f87171; }
.qa-kpi.blue[b-dxafsoyl84]   { border-left: 3px solid #fb923c; }
.qa-kpi.orange[b-dxafsoyl84] { border-left: 3px solid #f97316; }

.qa-kpi-icon[b-dxafsoyl84] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.qa-kpi.green  .qa-kpi-icon[b-dxafsoyl84] { background: rgba(52,211,153,.12); color: #34d399; }
.qa-kpi.red    .qa-kpi-icon[b-dxafsoyl84] { background: rgba(248,113,113,.12); color: #f87171; }
.qa-kpi.blue   .qa-kpi-icon[b-dxafsoyl84] { background: rgba(251,146,60,.12);  color: #fb923c; }
.qa-kpi.orange .qa-kpi-icon[b-dxafsoyl84] { background: rgba(249,115,22,.12);  color: #f97316; }

.qa-kpi-val[b-dxafsoyl84]  { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); line-height: 1; }
.qa-kpi-lbl[b-dxafsoyl84]  { font-size: .7rem; color: var(--ds-text-muted); margin-top: .2rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── Dashboard grid ──────────────────────────────────────────── */
.qa-dash-grid[b-dxafsoyl84] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) { .qa-dash-grid[b-dxafsoyl84] { grid-template-columns: 1fr; } }

.qa-alerts-card[b-dxafsoyl84] { grid-column: 1 / -1; }
.qa-queue-card[b-dxafsoyl84] { grid-column: 1 / -1; }

.qa-queue-table-wrap[b-dxafsoyl84] {
    overflow-x: auto;
    max-height: 280px;
    overflow-y: auto;
}

.qa-queue-table[b-dxafsoyl84] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.qa-queue-table th[b-dxafsoyl84] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.22);
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.62rem;
    font-weight: 700;
    border-bottom: 1px solid var(--ds-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.qa-queue-table td[b-dxafsoyl84] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
}

.qa-queue-table tr:last-child td[b-dxafsoyl84] {
    border-bottom: none;
}

.qa-queue-pill[b-dxafsoyl84] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.qa-queue-pill.new[b-dxafsoyl84] {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

.qa-queue-pill.progress[b-dxafsoyl84] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* ── Cards ───────────────────────────────────────────────────── */
.qa-card[b-dxafsoyl84] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: .85rem;
}

.qa-card-head[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--ds-border);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ds-text);
}

.qa-card-body[b-dxafsoyl84] { padding: 1rem 1.1rem; }

.qa-card-foot[b-dxafsoyl84] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--ds-border);
    background: rgba(0,0,0,.12);
}

/* ── Bar charts ──────────────────────────────────────────────── */
.qa-bar-row[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .65rem;
}

.qa-bar-label[b-dxafsoyl84] {
    width: 130px;
    font-size: .76rem;
    color: var(--ds-text-muted);
    flex-shrink: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.qa-bar-track[b-dxafsoyl84] {
    flex: 1;
    height: 8px;
    background: var(--ds-border);
    border-radius: 6px;
    overflow: hidden;
}

.qa-bar-fill[b-dxafsoyl84] {
    height: 100%;
    border-radius: 6px;
    transition: width .5s ease;
}

.qa-bar-val[b-dxafsoyl84] {
    width: 28px;
    text-align: right;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Smart alerts ────────────────────────────────────────────── */
.qa-smart-alert[b-dxafsoyl84] {
    padding: .65rem .9rem;
    background: rgba(251,191,36,.06);
    border-left: 3px solid #fbbf24;
    border-radius: 0 8px 8px 0;
    font-size: .78rem;
    color: var(--ds-text);
    margin-bottom: .5rem;
}

/* ── Recent row ──────────────────────────────────────────────── */
.qa-recent-row[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1.1rem;
    border-bottom: 1px solid var(--ds-bg-surface);
    transition: background .12s;
    gap: .5rem;
}

.qa-recent-row:hover[b-dxafsoyl84] { background: rgba(255,255,255,.02); }
.qa-recent-row:last-child[b-dxafsoyl84] { border-bottom: none; }

/* ── Scan card ───────────────────────────────────────────────── */
.qa-scan-card[b-dxafsoyl84] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--ds-bg-elevated);
    border: 2px solid var(--ds-border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: .85rem;
    transition: border-color .15s;
}

.qa-scan-card:focus-within[b-dxafsoyl84] { border-color: rgba(52,211,153,.35); }

.qa-scan-icon[b-dxafsoyl84] {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: rgba(52,211,153,.1);
    border: 1px solid rgba(52,211,153,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #34d399;
    flex-shrink: 0;
}

.qa-scan-label[b-dxafsoyl84] {
    font-size: .63rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .5rem;
}

.qa-scan-row[b-dxafsoyl84] { display: flex; gap: .6rem; }

.qa-scan-input[b-dxafsoyl84] {
    flex: 1;
    background: var(--ds-bg-app);
    border: 2px solid var(--ds-border);
    border-radius: 10px;
    padding: .65rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-text);
    outline: none;
    font-family: monospace;
    transition: border-color .15s, box-shadow .15s;
}

.qa-scan-input:focus[b-dxafsoyl84] { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.1); }
.qa-scan-input.error[b-dxafsoyl84] { border-color: #f87171; }
.qa-scan-input[b-dxafsoyl84]::placeholder { color: var(--ds-text-muted); font-size: .85rem; }

.qa-error-msg[b-dxafsoyl84] { font-size: .76rem; color: #f87171; margin-top: .35rem; display: flex; align-items: center; }

.qa-new-form-hint[b-dxafsoyl84] {
    font-size: .76rem;
    color: var(--ds-text-muted);
    padding: .5rem .75rem;
    background: rgba(255,255,255,.02);
    border-radius: 8px;
    margin-bottom: .85rem;
    display: flex;
    align-items: center;
}

/* ── Check header ────────────────────────────────────────────── */
.qa-check-header[b-dxafsoyl84] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: .85rem;
    flex-wrap: wrap;
}

.qa-check-parfum[b-dxafsoyl84] { font-size: 1.15rem; font-weight: 700; color: var(--ds-text); }
.qa-check-meta[b-dxafsoyl84] { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; font-size: .72rem; color: var(--ds-text-muted); }

/* ── Check points ────────────────────────────────────────────── */
.qa-checkpoints[b-dxafsoyl84] { padding: .5rem 1.1rem 1rem; }

.qa-cp-row[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem 0;
    border-bottom: 1px solid var(--ds-bg-surface);
    gap: 1rem;
}

.qa-cp-row:last-child[b-dxafsoyl84] { border-bottom: none; }

.qa-cp-label[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--ds-text-sub);
    flex: 1;
}

.qa-cp-icon[b-dxafsoyl84] { font-size: .85rem; color: var(--ds-text-muted); }

.qa-cp-btns[b-dxafsoyl84] { display: flex; gap: .4rem; }

.qa-cp-btn[b-dxafsoyl84] {
    padding: .3rem .65rem;
    border-radius: 7px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .13s;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.qa-cp-btn:hover[b-dxafsoyl84] { border-color: var(--ds-text-muted); color: var(--ds-text-muted); }
.qa-cp-btn.active[b-dxafsoyl84] { font-weight: 700; }

/* ── Score preview ───────────────────────────────────────────── */
.qa-score-preview[b-dxafsoyl84] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 12px;
    padding: .85rem 1.1rem;
    margin-bottom: .85rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.qa-score-bar-wrap[b-dxafsoyl84] { display: flex; align-items: center; gap: .75rem; }

.qa-score-track[b-dxafsoyl84] {
    flex: 1;
    height: 10px;
    background: var(--ds-border);
    border-radius: 8px;
    overflow: hidden;
}

.qa-score-fill[b-dxafsoyl84] {
    height: 100%;
    border-radius: 8px;
    transition: width .5s, background .3s;
}

.qa-score-val[b-dxafsoyl84] { font-size: 1.1rem; font-weight: 800; flex-shrink: 0; }
.qa-score-lbl[b-dxafsoyl84] { font-size: .72rem; font-weight: 600; flex-shrink: 0; }

/* ── Add error form ──────────────────────────────────────────── */
.qa-add-error-form[b-dxafsoyl84] {
    padding: .85rem 1.1rem;
    background: var(--ds-bg-app);
    border-bottom: 1px solid var(--ds-border);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.qa-ae-row[b-dxafsoyl84] { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.qa-ae-field label[b-dxafsoyl84] { display: block; font-size: .62rem; font-weight: 700; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .3rem; }
.qa-ae-foot[b-dxafsoyl84] { display: flex; justify-content: flex-end; gap: .5rem; }

.qa-sev-btns[b-dxafsoyl84] { display: flex; gap: .4rem; }

.qa-sev-btn[b-dxafsoyl84] {
    padding: .3rem .65rem;
    border-radius: 7px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .13s;
}

/* ── Errors list ─────────────────────────────────────────────── */
.qa-errors-list[b-dxafsoyl84] { padding: .5rem .85rem; }

.qa-error-row[b-dxafsoyl84] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--ds-bg-surface);
}

.qa-error-row:last-child[b-dxafsoyl84] { border-bottom: none; }

.qa-err-sev[b-dxafsoyl84] {
    font-size: .62rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: .15rem;
}

.qa-err-type[b-dxafsoyl84] { font-size: .8rem; font-weight: 600; color: var(--ds-text); }
.qa-err-note[b-dxafsoyl84] { font-size: .72rem; color: var(--ds-text-muted); margin-top: .1rem; }
.qa-err-meta[b-dxafsoyl84] { font-size: .65rem; color: var(--ds-text-muted); margin-top: .1rem; }

/* ── Decision grid ───────────────────────────────────────────── */
.qa-decision-grid[b-dxafsoyl84] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}

@media (max-width: 600px) { .qa-decision-grid[b-dxafsoyl84] { grid-template-columns: 1fr; } }

.qa-decision-btn[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}

.qa-decision-btn:hover[b-dxafsoyl84] { border-color: var(--ds-text-muted); color: var(--ds-text-muted); background: rgba(255,255,255,.03); }
.qa-decision-btn.active[b-dxafsoyl84] { font-weight: 700; }
.qa-decision-btn i[b-dxafsoyl84] { font-size: 1rem; flex-shrink: 0; }

/* ── Result banner ───────────────────────────────────────────── */
.qa-result-banner[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.25rem;
    border: 2px solid;
    border-radius: 14px;
    margin-bottom: .75rem;
}

/* ── Inspect layout ──────────────────────────────────────────── */
.qa-inspect-layout[b-dxafsoyl84] {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1100px) { .qa-inspect-layout[b-dxafsoyl84] { grid-template-columns: 1fr; } }

.qa-inspect-left[b-dxafsoyl84]  { display: flex; flex-direction: column; }
.qa-inspect-right[b-dxafsoyl84] { position: sticky; top: 1rem; }

/* ── Right list ──────────────────────────────────────────────── */
.qa-right-list[b-dxafsoyl84] { overflow-y: auto; max-height: 600px; scrollbar-width: thin; }

.qa-right-item[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--ds-bg-surface);
    transition: background .12s;
}

.qa-right-item:hover[b-dxafsoyl84] { background: rgba(255,255,255,.02); }
.qa-right-item.active[b-dxafsoyl84] { background: rgba(249,115,22,.06); border-left: 3px solid #f97316; }

.qa-ri-dot[b-dxafsoyl84] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.qa-ri-name[b-dxafsoyl84] { font-size: .78rem; font-weight: 600; color: var(--ds-text-sub); }
.qa-ri-meta[b-dxafsoyl84] { font-size: .64rem; color: var(--ds-text-muted); margin-top: .1rem; }

/* ── History toolbar ─────────────────────────────────────────── */
.qa-history-toolbar[b-dxafsoyl84] {
    display: flex;
    gap: .65rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.qa-search[b-dxafsoyl84] {
    flex: 1;
    min-width: 180px;
    background: var(--ds-bg-app);
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    padding: .5rem .85rem;
    font-size: .82rem;
    color: var(--ds-text);
    outline: none;
}

.qa-search:focus[b-dxafsoyl84] { border-color: #34d399; }

/* ── Table ───────────────────────────────────────────────────── */
.qa-table-wrap[b-dxafsoyl84] { overflow-x: auto; background: var(--ds-bg-elevated); border: 1px solid var(--ds-border); border-radius: 14px; }

.qa-table[b-dxafsoyl84] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.qa-table th[b-dxafsoyl84] {
    padding: .65rem 1rem;
    background: var(--ds-bg-app);
    color: var(--ds-text-muted);
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-align: left;
    border-bottom: 1px solid var(--ds-border);
    white-space: nowrap;
}

.qa-table td[b-dxafsoyl84] {
    padding: .65rem 1rem;
    color: var(--ds-text-sub);
    border-bottom: 1px solid var(--ds-bg-surface);
    vertical-align: middle;
}

.qa-table tbody tr:hover[b-dxafsoyl84] { background: rgba(255,255,255,.02); }

/* ── Shared helpers ──────────────────────────────────────────── */
.qa-code[b-dxafsoyl84] {
    font-family: monospace;
    font-size: .72rem;
    background: rgba(52,211,153,.08);
    color: #34d399;
    padding: .15rem .4rem;
    border-radius: 5px;
}

.qa-status-pill[b-dxafsoyl84] {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.qa-score-badge[b-dxafsoyl84] {
    padding: .15rem .5rem;
    border-radius: 6px;
    font-size: .76rem;
    font-weight: 700;
}

.qa-err-count[b-dxafsoyl84] {
    padding: .15rem .5rem;
    border-radius: 6px;
    font-size: .76rem;
    font-weight: 700;
}

.qa-err-count.red[b-dxafsoyl84]    { background: rgba(248,113,113,.12); color: #f87171; }
.qa-err-count.orange[b-dxafsoyl84] { background: rgba(249,115,22,.12);  color: #f97316; }

.qa-badge-count[b-dxafsoyl84] {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 6px;
}

.qa-badge-count.red[b-dxafsoyl84]    { background: rgba(248,113,113,.15); color: #f87171; }
.qa-badge-count.orange[b-dxafsoyl84] { background: rgba(249,115,22,.15);  color: #f97316; }

/* ── Buttons ─────────────────────────────────────────────────── */
.qa-btn[b-dxafsoyl84] {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.1rem;
    border-radius: 9px;
    border: none;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .14s;
}

.qa-btn.orange[b-dxafsoyl84] { background: linear-gradient(135deg,#f97316,#ea580c); color:#fff; box-shadow: 0 4px 12px rgba(249,115,22,.25); }
.qa-btn.green[b-dxafsoyl84]  { background: linear-gradient(135deg,#34d399,#059669); color:#fff; box-shadow: 0 4px 12px rgba(52,211,153,.25); }
.qa-btn:hover[b-dxafsoyl84]  { filter: brightness(1.1); transform: translateY(-1px); }

.qa-btn-sm[b-dxafsoyl84] {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    border-radius: 8px;
    border: none;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .13s;
}

.qa-btn-sm.orange[b-dxafsoyl84]   { background: rgba(249,115,22,.15); color: #f97316; }
.qa-btn-sm.secondary[b-dxafsoyl84]{ background: transparent; border: 1px solid var(--ds-border); color: var(--ds-text-muted); }
.qa-btn-sm:hover[b-dxafsoyl84]    { filter: brightness(1.2); }

.qa-btn-save[b-dxafsoyl84] {
    padding: .55rem 1.1rem;
    border-radius: 9px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all .13s;
}

.qa-btn-save:hover[b-dxafsoyl84] { background: rgba(255,255,255,.05); color: var(--ds-text); }

.qa-btn-finalize[b-dxafsoyl84] {
    padding: .55rem 1.4rem;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, #34d399, #059669);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 14px rgba(52,211,153,.3);
    transition: all .15s;
}

.qa-btn-finalize:disabled[b-dxafsoyl84] { opacity: .4; cursor: not-allowed; }
.qa-btn-finalize:hover:not(:disabled)[b-dxafsoyl84] { filter: brightness(1.1); transform: translateY(-1px); }

.qa-icon-btn[b-dxafsoyl84] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    font-size: .8rem;
    cursor: pointer;
    transition: filter .12s;
}

.qa-icon-btn.blue[b-dxafsoyl84] { background: rgba(251,146,60,.12); color: #fb923c; }
.qa-icon-btn.red[b-dxafsoyl84]  { background: rgba(248,113,113,.12); color: #f87171; }
.qa-icon-btn:hover[b-dxafsoyl84] { filter: brightness(1.3); }

/* ── Inputs ──────────────────────────────────────────────────── */
.qa-input[b-dxafsoyl84], .qa-select[b-dxafsoyl84], .qa-textarea[b-dxafsoyl84] {
    width: 100%;
    background: var(--ds-bg-app);
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    padding: .55rem .85rem;
    font-size: .82rem;
    color: var(--ds-text);
    outline: none;
    transition: border-color .13s;
}

.qa-input:focus[b-dxafsoyl84], .qa-select:focus[b-dxafsoyl84], .qa-textarea:focus[b-dxafsoyl84] { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.08); }
.qa-select option[b-dxafsoyl84] { background: var(--ds-bg-app); }
.qa-textarea[b-dxafsoyl84] { resize: vertical; }

/* ── Colors ──────────────────────────────────────────────────── */
.text-green[b-dxafsoyl84]  { color: #34d399; }
.text-orange[b-dxafsoyl84] { color: #f97316; }
.text-red[b-dxafsoyl84]    { color: #f87171; }
.text-blue[b-dxafsoyl84]   { color: #fb923c; }
.text-yellow[b-dxafsoyl84] { color: #fbbf24; }

/* ── Empty state ─────────────────────────────────────────────── */
.qa-empty[b-dxafsoyl84] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem;
    color: var(--ds-text-muted);
    font-size: .8rem;
    justify-content: center;
    flex-direction: column;
}
/* /Pages/RecommandationParfum.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   INTELLIGENCE PARFUM — Premium UI
   Scoped overrides (higher specificity than inline <style> block)
   Uses design system tokens: --ds-*
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page container ──────────────────────────────────────────────── */
[b-o0e5me7tb7] .ds-page-header {
    margin-bottom: 1.5rem;
}

/* ── Mode selector buttons ───────────────────────────────────────── */
[b-o0e5me7tb7] .rp-mode-btn {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1.5px solid var(--ds-border);
    background: var(--ds-bg-elevated);
    color: var(--ds-text-sub);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
[b-o0e5me7tb7] .rp-mode-btn:hover:not(.active) {
    background: var(--ds-bg-surface);
    border-color: var(--ds-border-focus);
    color: var(--ds-text);
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-sm);
}
[b-o0e5me7tb7] .rp-mode-btn.active {
    background: var(--ds-accent-dim);
    color: var(--ds-accent);
    border-color: var(--ds-accent);
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--ds-accent-ring);
}

/* ── Pack mode button ────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-mode-btn-pack {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[b-o0e5me7tb7] .rp-mode-btn-pack:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(249,115,22,.2);
}
[b-o0e5me7tb7] .rp-mode-btn-pack.active {
    box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

/* ── Cards ───────────────────────────────────────────────────────── */
[b-o0e5me7tb7] .ds-card {
    border-radius: 14px !important;
    overflow: hidden;
    transition: box-shadow 220ms ease;
}

/* Panneau filtres : pas de overflow hidden sur les cartes (sinon boutons Mode / Pack coupés + chevauchement visuel) */
[b-o0e5me7tb7] .ip-left-panel .ds-card {
    overflow: visible !important;
}

/* Marketing & choix client — hiérarchie unifiée (accent orange, pas de violet/orange concurrent) */
[b-o0e5me7tb7] .ip-single-marketing-card {
    border-color: var(--ds-border) !important;
    background: var(--ds-bg-surface) !important;
    box-shadow: var(--ds-shadow-sm) !important;
}
[b-o0e5me7tb7] .ip-single-marketing-body {
    padding: 16px !important;
}
[b-o0e5me7tb7] .ip-single-marketing-body .ds-field {
    margin-bottom: 1.25rem;
}
[b-o0e5me7tb7] .ip-single-marketing-body .ds-field:last-child {
    margin-bottom: 0;
}
[b-o0e5me7tb7] .ip-left-panel .ip-single-choix-label {
    text-transform: none !important;
    color: var(--ds-text) !important;
    font-size: 12px !important;
    letter-spacing: 0.01em !important;
}
[b-o0e5me7tb7] .ip-single-hero {
    background: var(--ds-bg-elevated) !important;
    border: 1px solid var(--ds-border-subtle, var(--ds-border)) !important;
    border-left: 3px solid var(--ds-accent) !important;
}
[b-o0e5me7tb7] .ip-single-hero-kicker {
    color: var(--ds-accent) !important;
}
[b-o0e5me7tb7] .ip-single-style-grid-pulse {
    animation: ipSingleStylePulse 2.4s ease-in-out infinite;
}
[b-o0e5me7tb7] .ip-left-panel .ds-card-header {
    border-radius: 14px 14px 0 0 !important;
}

[b-o0e5me7tb7] .ds-card-header {
    border-radius: 0 !important;
    padding: 12px 18px !important;
}

[b-o0e5me7tb7] .ds-card-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    color: var(--ds-text) !important;
}

[b-o0e5me7tb7] .ds-card-body {
    padding: 16px !important;
}

/* ── Labels ──────────────────────────────────────────────────────── */
[b-o0e5me7tb7] .ds-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--ds-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px !important;
}

/* ── Primary button ──────────────────────────────────────────────── */
[b-o0e5me7tb7] .ds-btn-primary {
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 10px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}
[b-o0e5me7tb7] .ds-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--ds-accent-ring), 0 2px 8px rgba(0,0,0,.3);
    filter: brightness(1.08);
}
[b-o0e5me7tb7] .ds-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}
[b-o0e5me7tb7] .ds-btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Secondary button ────────────────────────────────────────────── */
[b-o0e5me7tb7] .ds-btn-secondary {
    font-weight: 600;
    font-size: 13px;
    border-radius: 10px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[b-o0e5me7tb7] .ds-btn-secondary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-sm);
}

/* ── Result cards ────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-result-card {
    border-radius: 14px !important;
    padding: 18px 20px !important;
    background: var(--ds-bg-surface) !important;
    border-color: var(--ds-border) !important;
    gap: 18px !important;
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[b-o0e5me7tb7] .rp-result-card:hover {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 4px 28px rgba(249,115,22,.12), 0 1px 6px rgba(0,0,0,.3) !important;
    transform: translateY(-2px);
}
[b-o0e5me7tb7] .rp-result-card.top {
    border-color: var(--ds-accent) !important;
    background: linear-gradient(135deg, var(--ds-accent-dim), rgba(124,58,237,.05)) !important;
    box-shadow: 0 0 0 1px rgba(249,115,22,.25) !important;
}

/* ── Perfume icon ────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-parfum-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    font-size: 22px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.3) !important;
}

/* ── Score bar ───────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-score-bar {
    height: 6px !important;
}
[b-o0e5me7tb7] .rp-score-fill {
    background: linear-gradient(90deg, var(--ds-accent), var(--ds-purple)) !important;
    border-radius: 999px !important;
    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Marketing style badges ──────────────────────────────────────── */
[b-o0e5me7tb7] .rp-style-badge {
    padding: 10px 8px 9px !important;
    border-radius: 10px !important;
    border-width: 1.5px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[b-o0e5me7tb7] .rp-style-badge:hover:not(.active):not([disabled]) {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.3) !important;
    border-color: var(--ms-color, var(--ds-accent)) !important;
    color: var(--ms-color, var(--ds-accent)) !important;
}
[b-o0e5me7tb7] .rp-style-badge.active {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
}

[b-o0e5me7tb7] .rp-style-icon { font-size: 1.2rem !important; }

/* ── Style pitch hint ────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-style-pitch {
    padding: 9px 14px !important;
    border-left-width: 3px !important;
    border-radius: 0 10px 10px 0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-style: italic;
}

/* ── Marketing mini-badge ────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-mkt-badge {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    transition: all 160ms ease !important;
}
[b-o0e5me7tb7] .rp-mkt-badge:hover {
    opacity: 1 !important;
    transform: scale(1.06) !important;
    filter: brightness(1.15) !important;
}

/* ── Pack card ───────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-pack-card {
    border-radius: 14px !important;
    overflow: hidden;
    transition: box-shadow 220ms ease !important;
}
[b-o0e5me7tb7] .rp-pack-card:hover {
    box-shadow: 0 6px 28px rgba(124,58,237,.18) !important;
}
[b-o0e5me7tb7] .rp-pack-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
}

/* ── Pack builder stepper ────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-stepper-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    transition: all 180ms ease !important;
}
[b-o0e5me7tb7] .pb-stepper-btn:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 2px 10px rgba(249,115,22,.3) !important;
}
[b-o0e5me7tb7] .pb-stepper-val {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    min-width: 32px !important;
    text-align: center;
}

/* ── Pack slots ──────────────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-slot {
    border-radius: 14px !important;
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[b-o0e5me7tb7] .pb-slot:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(249,115,22,.2) !important;
}
[b-o0e5me7tb7] .pb-slot.filled {
    border-width: 1.5px !important;
}
[b-o0e5me7tb7] .pb-slot.filled:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 24px rgba(249,115,22,.25) !important;
}
[b-o0e5me7tb7] .pb-slot.gift-slot:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(16,185,129,.18) !important;
}

/* ── Pack header card ────────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-header-card {
    border-radius: 14px !important;
}
[b-o0e5me7tb7] .pb-header-name {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
}

/* ── Pack summary ────────────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-summary {
    border-radius: 14px !important;
    background: var(--ds-bg-surface) !important;
    border-color: var(--ds-border) !important;
}
[b-o0e5me7tb7] .pb-summary-row {
    padding: 8px 0 !important;
    font-size: 13.5px !important;
}
[b-o0e5me7tb7] .pb-summary-lbl {
    font-weight: 600 !important;
}

/* ── Saved pack cards ────────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-saved-card {
    border-radius: 12px !important;
    transition: all 180ms ease !important;
}
[b-o0e5me7tb7] .pb-saved-card:hover {
    border-color: rgba(249,115,22,.4) !important;
    background: rgba(249,115,22,.04) !important;
    transform: translateX(2px);
}
[b-o0e5me7tb7] .pb-saved-card-name {
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ── Saved button ────────────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-saved-btn {
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    transition: all 160ms ease !important;
}
[b-o0e5me7tb7] .pb-saved-btn:hover {
    transform: scale(1.06) !important;
}

/* ── Command action buttons ──────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-action-btn {
    border-radius: 9px !important;
    width: 32px !important;
    height: 32px !important;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[b-o0e5me7tb7] .cmd-action-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
}

/* ── Command rows ────────────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-row {
    border-radius: 0;
    transition: background 150ms ease, padding-left 150ms ease !important;
}
[b-o0e5me7tb7] .cmd-row:hover {
    background: rgba(249,115,22,.04) !important;
    padding-left: 18px !important;
}

[b-o0e5me7tb7] .cmd-row-rich {
    transition: background 150ms ease !important;
}
[b-o0e5me7tb7] .cmd-row-rich:hover {
    background: rgba(255,255,255,.025) !important;
}

/* ── Client name in commands ─────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-client-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ds-text) !important;
    letter-spacing: 0.01em;
}

/* ── Ref badge ───────────────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-ref-badge {
    font-size: 10px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
}

/* ── Tracking code ───────────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-tracking-code {
    border-radius: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
}

/* ── Cat filter strip ────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-cat-filter-btn {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    padding: 5px 14px !important;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[b-o0e5me7tb7] .rp-cat-filter-btn:hover:not(.active) {
    transform: translateY(-1px) !important;
    box-shadow: var(--ds-shadow-xs) !important;
}
[b-o0e5me7tb7] .rp-cat-filter-btn.active {
    box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
    transform: translateY(-1px) !important;
}

/* ── Alt rows ────────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-alt-row {
    font-size: 13.5px !important;
    transition: background 150ms ease, padding-left 150ms ease !important;
}
[b-o0e5me7tb7] .rp-alt-row:hover {
    background: var(--ds-bg-elevated) !important;
    padding-left: 20px !important;
}

/* ── Picker modal ────────────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-picker-modal {
    border-radius: 18px !important;
}
[b-o0e5me7tb7] .pb-picker-head {
    border-radius: 18px 18px 0 0 !important;
}
[b-o0e5me7tb7] .pb-picker-title {
    font-size: 15px !important;
    font-weight: 800 !important;
}
[b-o0e5me7tb7] .pb-picker-item {
    transition: background 120ms ease, padding-left 120ms ease !important;
}
[b-o0e5me7tb7] .pb-picker-item:hover {
    padding-left: 24px !important;
}
[b-o0e5me7tb7] .pb-picker-item-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

/* ── Drawer ──────────────────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-drawer {
    border-radius: 16px 0 0 16px !important;
}
[b-o0e5me7tb7] .cmd-close-btn {
    border-radius: 8px !important;
    transition: all 160ms ease !important;
}

/* ── Foot buttons ────────────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-foot-btn {
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: all 180ms ease !important;
}
[b-o0e5me7tb7] .cmd-foot-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.2) !important;
}

/* ── Save command modal ──────────────────────────────────────────── */
[b-o0e5me7tb7] .save-cmd-modal {
    border-radius: 18px !important;
}
[b-o0e5me7tb7] .save-cmd-header {
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 14px 20px !important;
}
[b-o0e5me7tb7] .save-cmd-btn.confirm {
    font-size: 14px !important;
    font-weight: 800 !important;
    transition: all 180ms ease !important;
}
[b-o0e5me7tb7] .save-cmd-btn.confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(249,115,22,.4) !important;
    filter: brightness(1.1) !important;
}
[b-o0e5me7tb7] .save-cmd-btn.cancel {
    transition: all 160ms ease !important;
}
[b-o0e5me7tb7] .save-cmd-close {
    border-radius: 8px !important;
    transition: all 150ms ease !important;
}

/* ── Input focus rings ───────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-input:focus,
[b-o0e5me7tb7] .save-cmd-input:focus,
[b-o0e5me7tb7] .pb-picker-search input:focus {
    box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
    border-color: #f97316 !important;
}
[b-o0e5me7tb7] .ds-input:focus,
[b-o0e5me7tb7] .ds-select:focus {
    box-shadow: 0 0 0 3px var(--ds-accent-ring) !important;
    border-color: var(--ds-accent) !important;
}

/* ── Gift items ──────────────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-gift-item {
    border-radius: 10px !important;
    transition: all 160ms ease !important;
}
[b-o0e5me7tb7] .pb-gift-item:hover {
    transform: translateX(2px) !important;
}
[b-o0e5me7tb7] .pb-gift-item.selected {
    transform: translateX(2px) !important;
}

/* ── Couple section labels ───────────────────────────────────────── */
[b-o0e5me7tb7] .rp-couple-label {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

/* ── Stat bar ────────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-stat-bar { height: 5px !important; }
[b-o0e5me7tb7] .rp-stat-bar-fill {
    border-radius: 999px !important;
    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── Pack tag ────────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-pack-tag {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
}

/* ── Pack styles bar ─────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-pack-styles {
    gap: 8px !important;
}

/* ── Pack footer ─────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-pack-footer { padding: 12px 18px !important; }

/* ── Couple card ─────────────────────────────────────────────────── */
[b-o0e5me7tb7] .rp-couple-card {
    border-radius: 12px !important;
    transition: box-shadow 180ms ease !important;
}
[b-o0e5me7tb7] .rp-couple-card:hover {
    box-shadow: var(--ds-shadow-sm) !important;
}

/* ── Empty states ────────────────────────────────────────────────── */
[b-o0e5me7tb7] .ds-empty-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--ds-text) !important;
    margin-bottom: 8px !important;
}
[b-o0e5me7tb7] .ds-empty-body {
    font-size: 13.5px !important;
    color: var(--ds-text-sub) !important;
    line-height: 1.6 !important;
}

/* ── Summary price values ────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-price-val {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

/* ── Command top bar title ───────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-top-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
}

/* ── Status tags ─────────────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-status-tag {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 2px 7px !important;
}

/* ── Filter buttons (commandes) ──────────────────────────────────── */
[b-o0e5me7tb7] .cmd-filter-btn {
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    transition: all 160ms ease !important;
}
[b-o0e5me7tb7] .cmd-filter-btn:hover {
    transform: translateY(-1px) !important;
    border-color: var(--ds-text-sub) !important;
    color: var(--ds-text) !important;
}
[b-o0e5me7tb7] .cmd-filter-btn.active {
    transform: translateY(-1px) !important;
}

/* ── Add button ──────────────────────────────────────────────────── */
[b-o0e5me7tb7] .cmd-add-btn {
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    transition: all 160ms ease !important;
}
[b-o0e5me7tb7] .cmd-add-btn:hover {
    transform: translateY(-1px) !important;
}

/* ── Slot remove button ──────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-slot-remove {
    border-radius: 20px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    transition: all 150ms ease !important;
}
[b-o0e5me7tb7] .pb-slot-remove:hover {
    transform: scale(1.05) !important;
}

/* ── Gift chips ──────────────────────────────────────────────────── */
[b-o0e5me7tb7] .pb-gift-chip {
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    transition: all 150ms ease !important;
}

/* ── Animations (better easing) ─────────────────────────────────── */
@keyframes rpFadeIn-b-o0e5me7tb7 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes drawerSlideIn-b-o0e5me7tb7 {
    from { transform: translateX(105%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes fadeIn-b-o0e5me7tb7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp-b-o0e5me7tb7 {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* /Pages/Remplissage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   VOLCHIC — Remplissage & Étiquetage — Industrial Terminal
   ═══════════════════════════════════════════════════════════════ */

.fill-page[b-0lsctqr22q] {
    padding: 1.25rem;
    max-width: 1500px;
    font-family: inherit;
}

/* ── Header ──────────────────────────────────────────────────── */
.fill-header[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.fill-title[b-0lsctqr22q] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ds-text);
    margin: 0;
}

.fill-sub[b-0lsctqr22q] {
    font-size: .75rem;
    color: var(--ds-text-muted);
    margin: .2rem 0 0;
    letter-spacing: .04em;
    max-width: 48rem;
    line-height: 1.45;
}
.fill-sub strong[b-0lsctqr22q] { color: var(--ds-text-sub); }
.fill-sub-link[b-0lsctqr22q] {
    color: var(--ds-accent);
    font-weight: 700;
    text-decoration: none;
}
.fill-sub-link:hover[b-0lsctqr22q] {
    text-decoration: underline;
}

.fill-header-stats[b-0lsctqr22q] {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.fill-stat[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: 20px;
    font-size: .76rem;
    font-weight: 600;
}

.fill-stat.orange[b-0lsctqr22q] { background: rgba(249,115,22,.1); color: #f97316; border: 1px solid rgba(249,115,22,.2); }
.fill-stat.green[b-0lsctqr22q]  { background: rgba(52,211,153,.1);  color: #34d399; border: 1px solid rgba(52,211,153,.2); }
.fill-stat.blue[b-0lsctqr22q]   { background: rgba(249,115,22,.1);  color: #fb923c; border: 1px solid rgba(249,115,22,.2); }

/* ── File d’attente poste (batches production validés) ─────── */
.fill-work-queue[b-0lsctqr22q] {
    background: var(--ds-bg-elevated);
    border: 2px solid rgba(249, 115, 22, 0.35);
    border-radius: 16px;
    padding: 1.1rem 1.25rem 1.25rem;
    margin-bottom: 1.35rem;
}

.fill-work-queue-head[b-0lsctqr22q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.fill-work-queue-title[b-0lsctqr22q] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ds-text);
}

.fill-work-queue-sub[b-0lsctqr22q] {
    margin: 0.35rem 0 0;
    font-size: 0.74rem;
    color: var(--ds-text-muted);
    line-height: 1.45;
    max-width: 52rem;
}

.fill-work-queue-sub a[b-0lsctqr22q] {
    color: var(--ds-accent);
    font-weight: 700;
}

.fill-work-queue-count[b-0lsctqr22q] {
    flex-shrink: 0;
    min-width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    background: rgba(249, 115, 22, 0.18);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.35);
}

.fill-work-queue-empty[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.22);
    color: var(--ds-text-muted);
    font-size: 0.8rem;
}

.fill-work-queue-empty i[b-0lsctqr22q] {
    color: #34d399;
    font-size: 1.25rem;
}

.fill-work-queue-table-wrap[b-0lsctqr22q] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
}

.fill-work-queue-table[b-0lsctqr22q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.fill-work-queue-table th[b-0lsctqr22q] {
    text-align: left;
    padding: 0.55rem 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65rem;
    font-weight: 700;
    border-bottom: 1px solid var(--ds-border);
}

.fill-work-queue-table td[b-0lsctqr22q] {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
}

.fill-work-queue-table tr:last-child td[b-0lsctqr22q] {
    border-bottom: none;
}

.fill-work-queue-table tr.fill-wq-active[b-0lsctqr22q] {
    background: rgba(249, 115, 22, 0.1);
}

.fill-wq-pill[b-0lsctqr22q] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.fill-wq-pill.new[b-0lsctqr22q] {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.35);
}

.fill-wq-mini[b-0lsctqr22q] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.65rem;
    color: var(--ds-text-muted);
}

.fill-wq-open-btn[b-0lsctqr22q] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    border: none;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #fff;
}

.fill-wq-open-btn:hover[b-0lsctqr22q] {
    filter: brightness(1.08);
}

/* ── Scan terminal ───────────────────────────────────────────── */
.scan-terminal[b-0lsctqr22q] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--ds-bg-elevated);
    border: 2px solid var(--ds-border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    transition: border-color .2s;
}

.scan-terminal:focus-within[b-0lsctqr22q] {
    border-color: rgba(249,115,22,.4);
    box-shadow: 0 0 24px rgba(249,115,22,.08);
}

.scan-terminal-icon[b-0lsctqr22q] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(249,115,22,.12);
    border: 1px solid rgba(249,115,22,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #f97316;
    flex-shrink: 0;
}

.scan-terminal-body[b-0lsctqr22q] {
    flex: 1;
    min-width: 0;
}

.scan-label[b-0lsctqr22q] {
    font-size: .65rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .6rem;
}

.scan-input-row[b-0lsctqr22q] {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.scan-input[b-0lsctqr22q] {
    flex: 1;
    background: var(--ds-bg-app);
    border: 2px solid var(--ds-border);
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ds-text);
    outline: none;
    font-family: monospace;
    letter-spacing: .05em;
    transition: border-color .15s, box-shadow .15s;
}

.scan-input:focus[b-0lsctqr22q] {
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249,115,22,.1);
}

.scan-input.error[b-0lsctqr22q] {
    border-color: #f87171;
    box-shadow: 0 0 0 4px rgba(248,113,113,.1);
}

.scan-input[b-0lsctqr22q]::placeholder { color: var(--ds-text-muted); font-size: .9rem; letter-spacing: .02em; }

.scan-btn[b-0lsctqr22q] {
    padding: .75rem 1.4rem;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(249,115,22,.3);
    transition: all .15s;
    display: flex;
    align-items: center;
}

.scan-btn:hover[b-0lsctqr22q] { filter: brightness(1.1); transform: translateY(-1px); }

.scan-error-msg[b-0lsctqr22q] {
    margin-top: .5rem;
    font-size: .78rem;
    color: #f87171;
    display: flex;
    align-items: center;
}

.scan-ready-dot[b-0lsctqr22q] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ds-border);
    transition: background .2s;
}

.scan-ready-dot.scanning[b-0lsctqr22q] {
    background: #f97316;
    animation: pulse-dot-b-0lsctqr22q .8s ease-in-out infinite;
}

@keyframes pulse-dot-b-0lsctqr22q {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.4); }
}

/* ── Main workspace ──────────────────────────────────────────── */
.fill-workspace[b-0lsctqr22q] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1100px) {
    .fill-workspace[b-0lsctqr22q] { grid-template-columns: 1fr; }
}

.fill-left[b-0lsctqr22q]  { display: flex; flex-direction: column; gap: .75rem; }
.fill-right[b-0lsctqr22q] { display: flex; flex-direction: column; gap: .75rem; }

/* ── Batch card ──────────────────────────────────────────────── */
.fill-batch-card[b-0lsctqr22q] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
}

.fill-batch-head[b-0lsctqr22q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
    flex-wrap: wrap;
}

.fill-batch-name[b-0lsctqr22q] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ds-text);
}

.fill-batch-meta[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

.fill-status-badge[b-0lsctqr22q] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: 10px;
    border: 1px solid;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.fill-qc-link[b-0lsctqr22q] {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: none;
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.45);
    background: rgba(167, 139, 250, 0.1);
    transition: background 0.12s ease, color 0.12s ease;
}
.fill-qc-link:hover[b-0lsctqr22q] {
    color: #fff;
    background: #7c3aed;
    border-color: #7c3aed;
}

.fill-target-row[b-0lsctqr22q] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.fill-target-item[b-0lsctqr22q] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .85rem;
    background: var(--ds-bg-app);
    border-radius: 9px;
    border: 1px solid var(--ds-border);
}

.fill-target-item span[b-0lsctqr22q]  { font-size: .62rem; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.fill-target-item strong[b-0lsctqr22q]{ font-size: .88rem; color: var(--ds-text); font-weight: 600; }

/* ── Objectif production (batch) ─────────────────────────────── */
.fill-objectif-card[b-0lsctqr22q] {
    margin-top: .75rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(249,115,22,.22);
    background: rgba(249,115,22,.06);
}

.fill-objectif-head[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ds-text);
    margin-bottom: .65rem;
}

.fill-objectif-grid[b-0lsctqr22q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .55rem;
}

.fill-objectif-cell[b-0lsctqr22q] {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .5rem .65rem;
    background: var(--ds-bg-app);
    border-radius: 9px;
    border: 1px solid var(--ds-border);
    font-size: .78rem;
}

.fill-objectif-cell.highlight[b-0lsctqr22q] {
    border-color: rgba(249,115,22,.35);
    background: rgba(249,115,22,.08);
}

.fill-objectif-cell.wide[b-0lsctqr22q] { grid-column: span 2; }

@media (max-width: 600px) {
    .fill-objectif-cell.wide[b-0lsctqr22q] { grid-column: span 1; }
}

.fill-objectif-cell span[b-0lsctqr22q] {
    font-size: .58rem;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.fill-objectif-cell strong[b-0lsctqr22q] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ds-text);
    line-height: 1.25;
}

.fill-objectif-hint[b-0lsctqr22q] {
    font-size: .62rem;
    color: var(--ds-text-muted);
    font-weight: 500;
}

.fill-objectif-notes[b-0lsctqr22q] {
    margin-top: .55rem;
    padding: .45rem .65rem;
    font-size: .75rem;
    color: var(--ds-text-muted);
    background: var(--ds-bg-app);
    border-radius: 8px;
    border: 1px dashed var(--ds-border);
}

/* ── Contrôle qualité (listes) ───────────────────────────────── */
.fill-qc-block[b-0lsctqr22q] {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
    background: rgba(255,255,255,.02);
}

.fill-qc-block.purple[b-0lsctqr22q] {
    border-color: rgba(167,139,250,.28);
    background: rgba(167,139,250,.06);
}

.fill-qc-head[b-0lsctqr22q] {
    font-size: .78rem;
    font-weight: 800;
    color: var(--ds-text);
    display: flex;
    align-items: center;
    margin-bottom: .35rem;
}

.fill-qc-intro[b-0lsctqr22q] {
    font-size: .72rem;
    color: var(--ds-text-muted);
    margin: 0 0 .6rem;
    line-height: 1.35;
}

.fill-qc-muted[b-0lsctqr22q] {
    font-size: .7rem;
    color: var(--ds-text-muted);
    margin: 0 0 .5rem;
}

.fill-qc-list[b-0lsctqr22q] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.fill-qc-item[b-0lsctqr22q] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--ds-text-sub);
}

.fill-qc-item input[type="checkbox"][b-0lsctqr22q] {
    margin-top: .15rem;
    width: 16px;
    height: 16px;
    accent-color: #f97316;
    flex-shrink: 0;
    cursor: pointer;
}

.fill-qc-block.purple .fill-qc-item input[type="checkbox"][b-0lsctqr22q] {
    accent-color: #a78bfa;
}

.fill-qc-item input[type="checkbox"]:disabled[b-0lsctqr22q] {
    cursor: not-allowed;
    opacity: .55;
}

.fill-qc-item label[b-0lsctqr22q] {
    cursor: pointer;
    flex: 1;
}

.fill-qc-item input:disabled + label[b-0lsctqr22q] {
    cursor: default;
}

.fill-qc-warn[b-0lsctqr22q] {
    margin-top: .55rem;
    font-size: .72rem;
    color: #fbbf24;
    display: flex;
    align-items: center;
}

.fill-qc-done[b-0lsctqr22q] {
    margin-top: .55rem;
    font-size: .74rem;
    color: #34d399;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* ── Section cards ───────────────────────────────────────────── */
.fill-section[b-0lsctqr22q] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    transition: all .2s;
}

.fill-section.locked[b-0lsctqr22q] { opacity: .55; pointer-events: none; }
.fill-section.done[b-0lsctqr22q]   { border-color: rgba(52,211,153,.25); }

.fill-section-head[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ds-text);
    letter-spacing: .04em;
}

.fill-section-num[b-0lsctqr22q] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    flex-shrink: 0;
}

.fill-section-num.orange[b-0lsctqr22q] { background: rgba(249,115,22,.2); color: #f97316; }
.fill-section-num.purple[b-0lsctqr22q] { background: rgba(167,139,250,.2); color: #a78bfa; }

.fill-done-badge[b-0lsctqr22q] {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 600;
    color: #34d399;
    background: rgba(52,211,153,.1);
    padding: .2rem .6rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.fill-locked-badge[b-0lsctqr22q] {
    font-size: .68rem;
    color: var(--ds-text-muted);
    background: rgba(255,255,255,.04);
    padding: .2rem .6rem;
    border-radius: 6px;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.fill-locked-overlay[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.5rem;
    color: var(--ds-text-muted);
    font-size: .82rem;
}

/* ── Progress bar ────────────────────────────────────────────── */
.fill-progress-wrap[b-0lsctqr22q] {
    margin-bottom: .85rem;
}

.fill-progress-labels[b-0lsctqr22q] {
    display: flex;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.fill-progress-current[b-0lsctqr22q] {
    font-size: 1.35rem;
    font-weight: 800;
    color: #f97316;
}

.fill-progress-target[b-0lsctqr22q] {
    font-size: .85rem;
    color: var(--ds-text-muted);
    align-self: flex-end;
}

.fill-progress-track[b-0lsctqr22q] {
    height: 14px;
    background: var(--ds-border);
    border-radius: 10px;
    overflow: hidden;
}

.fill-progress-bar[b-0lsctqr22q] {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #f97316, #ea580c);
    transition: width .4s ease;
}

.fill-progress-bar.purple[b-0lsctqr22q] {
    background: linear-gradient(90deg, #a78bfa, #7c3aed);
}

.fill-progress-bar.overfill[b-0lsctqr22q] {
    background: linear-gradient(90deg, #f87171, #dc2626);
    animation: fill-pulse-b-0lsctqr22q .7s ease-in-out infinite alternate;
}

@keyframes fill-pulse-b-0lsctqr22q {
    from { opacity: .7; }
    to   { opacity: 1; }
}

.fill-progress-pct[b-0lsctqr22q] {
    text-align: right;
    font-size: .7rem;
    color: var(--ds-text-muted);
    margin-top: .25rem;
}

/* ── Quantity controls ───────────────────────────────────────── */
.fill-qty-controls[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.fill-qty-btn[b-0lsctqr22q] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: none;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .13s;
    flex-shrink: 0;
}

.fill-qty-btn.minus[b-0lsctqr22q] { background: rgba(249,115,22,.15); color: #fb923c; }
.fill-qty-btn.plus[b-0lsctqr22q]  { background: rgba(249,115,22,.15); color: #f97316; }
.fill-qty-btn:hover[b-0lsctqr22q] { filter: brightness(1.25); transform: scale(1.05); }

.fill-qty-display[b-0lsctqr22q] {
    flex: 1;
    min-width: 80px;
}

.fill-qty-input[b-0lsctqr22q] {
    width: 100%;
    text-align: center;
    background: var(--ds-bg-app);
    border: 2px solid var(--ds-border);
    border-radius: 10px;
    padding: .6rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: #f97316;
    outline: none;
}

.fill-qty-input:focus[b-0lsctqr22q] { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }

.fill-quick-fill[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.fill-pct-btn[b-0lsctqr22q] {
    padding: .3rem .7rem;
    border-radius: 7px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}

.fill-pct-btn:hover[b-0lsctqr22q] { border-color: #f97316; color: #f97316; }

/* ── Action buttons ──────────────────────────────────────────── */
.fill-actions[b-0lsctqr22q] { display: flex; flex-direction: column; gap: .5rem; }

.fill-big-btn[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .04em;
    transition: all .15s;
}

.fill-big-btn:disabled[b-0lsctqr22q] { opacity: .4; cursor: not-allowed; }
.fill-big-btn:hover:not(:disabled)[b-0lsctqr22q] { filter: brightness(1.1); transform: translateY(-1px); }

.fill-big-btn.start[b-0lsctqr22q]    { background: linear-gradient(135deg,#f97316,#ea580c); color:#fff; box-shadow:0 4px 16px rgba(249,115,22,.3); }
.fill-big-btn.stop[b-0lsctqr22q]     { background: linear-gradient(135deg,#fb923c,#ea580c); color:#fff; box-shadow:0 4px 16px rgba(249,115,22,.3); }
.fill-big-btn.label[b-0lsctqr22q]    { background: linear-gradient(135deg,#a78bfa,#7c3aed); color:#fff; box-shadow:0 4px 16px rgba(167,139,250,.3); }
.fill-big-btn.complete[b-0lsctqr22q] { background: linear-gradient(135deg,#34d399,#059669); color:#fff; box-shadow:0 4px 16px rgba(52,211,153,.3); }

.fill-done-row[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    background: rgba(52,211,153,.06);
    border: 1px solid rgba(52,211,153,.2);
    border-radius: 10px;
    font-size: .85rem;
    color: #34d399;
    font-weight: 600;
}

.fill-complete-banner[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(5,150,105,.08));
    border: 2px solid rgba(52,211,153,.3);
    border-radius: 14px;
    color: #34d399;
    font-size: 1.5rem;
    animation: complete-shine-b-0lsctqr22q 2s ease-in-out infinite alternate;
}

@keyframes complete-shine-b-0lsctqr22q {
    from { box-shadow: 0 0 10px rgba(52,211,153,.15); }
    to   { box-shadow: 0 0 24px rgba(52,211,153,.35); }
}

/* ── Alerts ──────────────────────────────────────────────────── */
.fill-alert[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    padding: .6rem .85rem;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 500;
    margin-bottom: .5rem;
}

.fill-alert.error[b-0lsctqr22q]   { background: rgba(248,113,113,.08); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
.fill-alert.warning[b-0lsctqr22q] { background: rgba(251,191,36,.08);  color: #fbbf24; border: 1px solid rgba(251,191,36,.2);  }

/* ── Small buttons ───────────────────────────────────────────── */
.fill-small-btn[b-0lsctqr22q] {
    padding: .4rem .85rem;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    font-size: .78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all .12s;
}

.fill-small-btn:hover[b-0lsctqr22q] { background: rgba(255,255,255,.05); color: var(--ds-text); }
.fill-small-btn.red:hover[b-0lsctqr22q] { border-color: #f87171; color: #f87171; }

/* ── Activity log ────────────────────────────────────────────── */
.fill-log-card[b-0lsctqr22q] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
    flex: 1;
}

.fill-log-head[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--ds-border);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ds-text);
}

.fill-log-count[b-0lsctqr22q] {
    margin-left: auto;
    font-size: .65rem;
    color: var(--ds-text-muted);
    font-weight: 400;
}

.fill-log-body[b-0lsctqr22q] {
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ds-text-muted) transparent;
}

.fill-log-entry[b-0lsctqr22q] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--ds-bg-surface);
    transition: background .12s;
}

.fill-log-entry:hover[b-0lsctqr22q]   { background: rgba(255,255,255,.02); }
.fill-log-entry.success[b-0lsctqr22q] { border-left: 3px solid #34d399; }
.fill-log-entry.warning[b-0lsctqr22q] { border-left: 3px solid #fbbf24; }
.fill-log-entry.error[b-0lsctqr22q]   { border-left: 3px solid #f87171; }
.fill-log-entry.info[b-0lsctqr22q]    { border-left: 3px solid var(--ds-border); }

.fill-log-time[b-0lsctqr22q] {
    font-size: .66rem;
    color: var(--ds-text-muted);
    font-family: monospace;
    white-space: nowrap;
    padding-top: .1rem;
    flex-shrink: 0;
}

.fill-log-content[b-0lsctqr22q] { flex: 1; min-width: 0; }

.fill-log-action[b-0lsctqr22q] {
    font-size: .76rem;
    font-weight: 600;
    color: var(--ds-text-sub);
}

.fill-log-note[b-0lsctqr22q] {
    font-size: .71rem;
    color: var(--ds-text-muted);
    margin-top: .1rem;
}

.fill-log-op[b-0lsctqr22q] {
    font-size: .65rem;
    color: var(--ds-text-muted);
    margin-top: .15rem;
}

.fill-log-qty[b-0lsctqr22q] {
    font-size: .78rem;
    font-weight: 700;
    color: #f97316;
    background: rgba(249,115,22,.1);
    padding: .1rem .4rem;
    border-radius: 5px;
    flex-shrink: 0;
    align-self: center;
}

/* ── Empty state ─────────────────────────────────────────────── */
.fill-empty-screen[b-0lsctqr22q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3.5rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--ds-bg-elevated);
    border: 2px dashed var(--ds-border);
    border-radius: 16px;
}

.fill-empty-icon[b-0lsctqr22q] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(249,115,22,.06);
    border: 2px dashed rgba(249,115,22,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--ds-text-muted);
}

.fill-empty-title[b-0lsctqr22q] { font-size: 1.1rem; font-weight: 600; color: var(--ds-text-muted); }
.fill-empty-sub[b-0lsctqr22q]   { font-size: .8rem; color: var(--ds-text-muted); }

/* ── Sessions table ──────────────────────────────────────────── */
.fill-sessions-table[b-0lsctqr22q] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
}

.fill-table-head[b-0lsctqr22q] {
    display: flex;
    align-items: center;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--ds-border);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ds-text);
}

.fill-table-wrap[b-0lsctqr22q] { overflow-x: auto; }

.fill-table[b-0lsctqr22q] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.fill-table th[b-0lsctqr22q] {
    padding: .65rem 1rem;
    background: var(--ds-bg-app);
    color: var(--ds-text-muted);
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-align: left;
    border-bottom: 1px solid var(--ds-border);
    white-space: nowrap;
}

.fill-table td[b-0lsctqr22q] {
    padding: .65rem 1rem;
    color: var(--ds-text-sub);
    border-bottom: 1px solid var(--ds-bg-surface);
    vertical-align: middle;
}

.fill-table tbody tr:hover[b-0lsctqr22q]    { background: rgba(255,255,255,.02); }
.fill-table tbody tr.active-row[b-0lsctqr22q] { background: rgba(249,115,22,.05); border-left: 3px solid #f97316; }

/* ── Shared helpers ──────────────────────────────────────────── */
.fill-code[b-0lsctqr22q] {
    font-family: monospace;
    font-size: .72rem;
    background: rgba(249,115,22,.1);
    color: #f97316;
    padding: .15rem .4rem;
    border-radius: 5px;
}

.fill-code.blue[b-0lsctqr22q] {
    background: rgba(249,115,22,.1);
    color: #fb923c;
}

.fill-sep[b-0lsctqr22q] { color: var(--ds-text-muted); }

.fill-status-pill[b-0lsctqr22q] {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.fill-icon-btn[b-0lsctqr22q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    font-size: .8rem;
    cursor: pointer;
    transition: filter .12s;
}

.fill-icon-btn.blue[b-0lsctqr22q] { background: rgba(249,115,22,.12); color: #fb923c; }
.fill-icon-btn.red[b-0lsctqr22q]  { background: rgba(239,68,68,.12);  color: #f87171; }
.fill-icon-btn:hover[b-0lsctqr22q] { filter: brightness(1.3); }

.text-orange[b-0lsctqr22q] { color: #f97316; }
.text-green[b-0lsctqr22q]  { color: #34d399; }
/* /Pages/SaisieSorties.razor.rz.scp.css */
/* Palette alignée VOLCHIC (orange) — variables locales */
.saisie-sorties-container[b-v5ljmvd0n8] {
    --ss-accent: var(--ds-accent, #f97316);
    --ss-accent-dark: var(--ds-accent-active, #ea580c);
    --ss-accent-soft: var(--ds-accent-hover, #fb923c);
    --ss-success: var(--ds-success, #22c55e);
    --ss-danger: var(--ds-danger, #ef4444);
    --ss-text: var(--ds-text, #e2e8f0);
    --ss-text-muted: var(--ds-text-muted, #94a3b8);
    --ss-femme-1: rgba(249, 115, 22, 0.1);
    --ss-femme-2: rgba(249, 115, 22, 0.16);
    --ss-femme-3: rgba(249, 115, 22, 0.25);
    --ss-homme-1: rgba(255, 255, 255, 0.03);
    --ss-homme-2: rgba(255, 255, 255, 0.05);
    --ss-homme-3: rgba(255, 255, 255, 0.08);
    padding: 2rem;
    background: var(--ds-bg-app, #0f172a);
    min-height: 100vh;
}

/* ========== HEADER ========== */
.saisie-header[b-v5ljmvd0n8] {
    margin-bottom: 2rem;
}

.btn-reset[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-accent-soft) 0%, var(--ss-accent) 45%, var(--ss-accent-dark) 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.28);
}

.btn-reset:hover[b-v5ljmvd0n8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.38);
}

.saisie-title[b-v5ljmvd0n8] {
    color: var(--ss-text);
    font-weight: 700;
    font-size: 2rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.saisie-boutique-bar[b-v5ljmvd0n8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.8rem 1.1rem;
    background: var(--ds-bg-surface, #1c2330);
    border-radius: 12px;
    border: 1px solid rgba(249, 115, 22, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.saisie-boutique-label[b-v5ljmvd0n8] {
    font-weight: 700;
    color: #f97316;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.saisie-boutique-label i[b-v5ljmvd0n8] {
    font-size: 1rem;
}

.saisie-boutique-select[b-v5ljmvd0n8] {
    max-width: min(100%, 320px);
    min-width: 180px;
    flex: 1;
    background: var(--ds-bg-app, #0f172a);
    border: 1.5px solid rgba(249, 115, 22, 0.45);
    border-radius: 8px;
    color: var(--ds-text, #e2e8f0);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.45rem 0.75rem;
    transition: border-color 0.15s;
    cursor: pointer;
}

.saisie-boutique-select:focus[b-v5ljmvd0n8] {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.saisie-boutique-select option[b-v5ljmvd0n8] {
    background: var(--ds-bg-app, #0f172a);
    color: var(--ds-text, #e2e8f0);
}

.saisie-boutique-hint[b-v5ljmvd0n8] {
    color: var(--ds-text-muted, #94a3b8);
    font-size: 0.78rem;
    margin: 0;
    flex: 1;
    min-width: 160px;
}

.saisie-no-store-alert[b-v5ljmvd0n8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
    padding: 0.8rem 1rem;
    font-size: 0.88rem;
}

.saisie-no-store-alert a[b-v5ljmvd0n8] {
    color: #f97316;
    font-weight: 700;
    text-decoration: underline;
}

/* ========== INPUT SECTIONS ========== */
.input-sections[b-v5ljmvd0n8] {
    margin-bottom: 2rem;
}

.input-card[b-v5ljmvd0n8] {
    background: var(--ds-bg-surface, #1c2330);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--ds-border, rgba(255,255,255,0.08));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.input-label[b-v5ljmvd0n8] {
    display: block;
    font-weight: 600;
    color: var(--ss-text-muted);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.form-control-custom[b-v5ljmvd0n8] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--ds-border, rgba(255,255,255,0.12));
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--ds-bg-app, #0f172a);
    color: var(--ds-text, #e2e8f0);
}

.form-control-custom:focus[b-v5ljmvd0n8] {
    outline: none;
    border-color: var(--ss-accent);
    box-shadow: 0 0 0 3px var(--ds-accent-ring, rgba(249, 115, 22, 0.2));
}

.input-large[b-v5ljmvd0n8] {
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
}

.batch-header[b-v5ljmvd0n8] {
    margin-bottom: 0.75rem;
}

.batch-hint[b-v5ljmvd0n8] {
    font-size: 0.85rem;
    color: #718096;
    font-style: italic;
}

.batch-input-group[b-v5ljmvd0n8] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-add-lot[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #22c55e 0%, var(--ss-success) 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.28);
}

.btn-add-lot:hover[b-v5ljmvd0n8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.38);
}

.batch-input-group .form-control-custom[b-v5ljmvd0n8] {
    flex: 1;
}

.batch-actions-row[b-v5ljmvd0n8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.btn-analyse-lot[b-v5ljmvd0n8] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 2px solid #86efac;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-analyse-lot:hover[b-v5ljmvd0n8] {
    background: #f0fdf4;
    border-color: #22c55e;
}

.btn-toggle-lot-response[b-v5ljmvd0n8] {
    background: rgba(249, 115, 22, 0.1);
    color: var(--ss-accent-dark);
    border: 2px solid #fdba74;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-toggle-lot-response:hover[b-v5ljmvd0n8] {
    background: #ffedd5;
}

.lot-stock-response[b-v5ljmvd0n8] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}

.lot-stock-response-head[b-v5ljmvd0n8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: var(--ss-text);
    font-size: 0.9rem;
}

.lot-stock-response-hint[b-v5ljmvd0n8] {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--ss-text-muted);
}

.lot-stock-response-grid[b-v5ljmvd0n8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .lot-stock-response-grid[b-v5ljmvd0n8] {
        grid-template-columns: 1fr;
    }
}

.lot-stock-response-block[b-v5ljmvd0n8] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--ds-border, rgba(255,255,255,0.1));
    background: var(--ds-bg-app, #0f172a);
}

.lot-stock-response-block.lot-ready[b-v5ljmvd0n8] {
    border-color: rgba(74, 222, 128, 0.4);
}

.lot-stock-response-block.lot-missing[b-v5ljmvd0n8] {
    border-color: rgba(252, 165, 165, 0.4);
}

.lot-stock-response-label[b-v5ljmvd0n8] {
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.lot-ready .lot-stock-response-label[b-v5ljmvd0n8] {
    color: #4ade80;
}

.lot-missing .lot-stock-response-label[b-v5ljmvd0n8] {
    color: #f87171;
}

.lot-stock-response-text[b-v5ljmvd0n8] {
    width: 100%;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--ds-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    resize: vertical;
    background: var(--ds-bg-app, #0f172a);
    color: var(--ds-text, #e2e8f0);
}

.btn-copy-lot[b-v5ljmvd0n8] {
    align-self: flex-start;
    background: var(--ss-accent);
    color: #fff;
    border: none;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-copy-lot:disabled[b-v5ljmvd0n8] {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-copy-lot:not(:disabled):hover[b-v5ljmvd0n8] {
    background: var(--ss-accent-dark);
}

/* ========== PARFUMS LIST ========== */
.parfums-list-card[b-v5ljmvd0n8] {
    background: var(--ds-bg-surface, #1c2330);
    border-radius: 12px;
    border: 1px solid var(--ds-border, rgba(255,255,255,0.08));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin-bottom: 2rem;
}

.parfums-list-header[b-v5ljmvd0n8] {
    padding: 1.5rem;
    border-bottom: none;
}

.femme-list-header[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-femme-1) 0%, var(--ss-femme-2) 50%, var(--ss-femme-3) 100%);
    border-bottom: 3px solid var(--ss-accent);
    color: var(--ss-text);
}

.homme-list-header[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-homme-1) 0%, var(--ss-homme-2) 50%, var(--ss-homme-3) 100%);
    border-bottom: 3px solid #57534e;
    color: var(--ss-text);
}

.parfums-list-title[b-v5ljmvd0n8] {
    color: var(--ss-text);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
}

.parfums-list-header-label[b-v5ljmvd0n8] {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ss-text-muted);
    font-weight: 500;
}

.parfums-list-header .btn-light[b-v5ljmvd0n8] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ds-text, #e2e8f0);
    font-weight: 600;
}

.parfums-list-header .btn-light:hover[b-v5ljmvd0n8] {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--ss-accent);
    color: var(--ss-accent-dark);
}

.parfums-list-body[b-v5ljmvd0n8] {
    padding: 0;
}

.parfums-list-items[b-v5ljmvd0n8] {
    max-height: 600px;
    overflow-y: auto;
}

.parfum-list-item[b-v5ljmvd0n8] {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--ds-border, rgba(255,255,255,0.07));
    transition: background-color 0.15s ease;
    gap: 1rem;
}

.parfum-list-item:hover[b-v5ljmvd0n8] {
    background-color: rgba(255, 255, 255, 0.04);
}

.parfum-list-item:last-child[b-v5ljmvd0n8] {
    border-bottom: none;
}

.parfum-checkbox[b-v5ljmvd0n8] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--ss-accent);
    flex-shrink: 0;
}

.parfum-id[b-v5ljmvd0n8] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ds-text-muted, #94a3b8);
    min-width: 50px;
    flex-shrink: 0;
}

.parfum-name[b-v5ljmvd0n8] {
    flex: 1;
    font-size: 0.95rem;
    color: var(--ds-text, #e2e8f0);
    font-weight: 500;
}

.parfum-actions[b-v5ljmvd0n8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-quantity[b-v5ljmvd0n8] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: 600;
}

.btn-decrement[b-v5ljmvd0n8] {
    background: var(--ss-danger);
    color: white;
}

.btn-decrement:hover[b-v5ljmvd0n8] {
    background: #b91c1c;
    transform: scale(1.05);
}

.btn-increment[b-v5ljmvd0n8] {
    background: var(--ss-success);
    color: white;
}

.btn-increment:hover[b-v5ljmvd0n8] {
    background: #15803d;
    transform: scale(1.05);
}

.quantite-display[b-v5ljmvd0n8] {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ds-text, #e2e8f0);
}

.btn-print-item[b-v5ljmvd0n8] {
    width: 36px;
    height: 36px;
    border: none;
    background: linear-gradient(135deg, var(--ss-accent-soft) 0%, var(--ss-accent) 50%, var(--ss-accent-dark) 100%);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

.btn-print-item:hover[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-accent) 0%, var(--ss-accent-dark) 100%);
    transform: scale(1.05);
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.35);
}

/* ========== CATEGORY CARDS ========== */
.category-card[b-v5ljmvd0n8] {
    background: var(--ds-bg-surface, #1c2330);
    border-radius: 12px;
    border: 1px solid var(--ds-border, rgba(255,255,255,0.08));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    height: 100%;
}

.category-header[b-v5ljmvd0n8] {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 2px solid var(--ds-border, rgba(255,255,255,0.1));
}

.femme-header[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, rgba(249,115,22,0.15) 0%, rgba(249,115,22,0.22) 55%, rgba(249,115,22,0.30) 100%);
    border-bottom: 3px solid var(--ss-accent);
}

.homme-header[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.09) 100%);
    border-bottom: 3px solid rgba(148, 163, 184, 0.5);
}

.category-title[b-v5ljmvd0n8] {
    color: var(--ss-text);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
}

.category-body[b-v5ljmvd0n8] {
    padding: 1.5rem;
}

.status-section[b-v5ljmvd0n8] {
    margin-bottom: 1.5rem;
}

.status-section:last-child[b-v5ljmvd0n8] {
    margin-bottom: 0;
}

.status-bar[b-v5ljmvd0n8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.status-ready .status-bar[b-v5ljmvd0n8] {
    background: rgba(34, 197, 94, 0.12);
    border: 2px solid rgba(74, 222, 128, 0.4);
}

.status-missing .status-bar[b-v5ljmvd0n8] {
    background: rgba(239, 68, 68, 0.12);
    border: 2px solid rgba(248, 113, 113, 0.4);
}

.btn-print[b-v5ljmvd0n8] {
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    color: white;
}

.btn-print-ready[b-v5ljmvd0n8] {
    background: #48bb78;
    box-shadow: 0 2px 6px rgba(72, 187, 120, 0.3);
}

.btn-print-ready:hover[b-v5ljmvd0n8] {
    background: #38a169;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(72, 187, 120, 0.4);
}

.btn-print-missing[b-v5ljmvd0n8] {
    background: #e53e3e;
    box-shadow: 0 2px 6px rgba(229, 62, 62, 0.3);
}

.btn-print-missing:hover[b-v5ljmvd0n8] {
    background: #c53030;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(229, 62, 62, 0.4);
}

.status-count[b-v5ljmvd0n8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ds-text, #e2e8f0);
}

.status-label[b-v5ljmvd0n8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: var(--ds-text-muted, #94a3b8);
    font-size: 0.95rem;
}

.status-icon-ready[b-v5ljmvd0n8] {
    color: #4ade80;
}

.status-icon-missing[b-v5ljmvd0n8] {
    color: #f87171;
}

.stock-details[b-v5ljmvd0n8] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ds-border, rgba(255,255,255,0.08));
    max-height: 250px;
    overflow-y: auto;
}

.stock-details.empty[b-v5ljmvd0n8] {
    padding: 1rem;
    text-align: center;
}

.empty-message[b-v5ljmvd0n8] {
    color: var(--ds-text-muted, #94a3b8);
    font-size: 0.85rem;
    font-style: italic;
}

.stock-item[b-v5ljmvd0n8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.15s ease;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.stock-item:hover[b-v5ljmvd0n8] {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.stock-name[b-v5ljmvd0n8] {
    font-weight: 500;
    color: var(--ds-text, #e2e8f0);
    flex: 1;
    text-align: left;
}

.stock-quantity[b-v5ljmvd0n8] {
    font-weight: 700;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.stock-id[b-v5ljmvd0n8] {
    font-weight: 600;
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.missing-item[b-v5ljmvd0n8] {
    background: rgba(249, 115, 22, 0.06);
    border-left: 3px solid #f97316;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
}

.missing-item:hover[b-v5ljmvd0n8] {
    background: rgba(249, 115, 22, 0.1);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.15);
}

.missing-item .stock-info[b-v5ljmvd0n8] {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    color: var(--ds-text-muted, #94a3b8);
}

.missing-item input[type="number"][b-v5ljmvd0n8] {
    border: 1px solid var(--ds-border, rgba(255,255,255,0.15));
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    background: var(--ds-bg-app, #0f172a);
    color: var(--ds-text, #e2e8f0);
}

.missing-item input[type="number"]:focus[b-v5ljmvd0n8] {
    border-color: #f97316;
    outline: none;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1);
}

.missing-list .stock-name[b-v5ljmvd0n8] {
    color: #fca5a5;
}

/* ========== TOP ACTIONS ========== */
.top-actions[b-v5ljmvd0n8] {
    margin-bottom: 2rem;
}

.btn-action[b-v5ljmvd0n8] {
    width: 100%;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-action:hover[b-v5ljmvd0n8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-action-orange[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-accent-soft) 0%, var(--ss-accent) 50%, var(--ss-accent-dark) 100%);
}

.btn-action-blue[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-accent-soft) 0%, var(--ss-accent) 50%, var(--ss-accent-dark) 100%);
}

.btn-action-purple[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
}

.btn-action-green[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

/* ========== STOCK LIST CARD ========== */
.stock-list-card[b-v5ljmvd0n8] {
    background: var(--ds-bg-surface, #1c2330);
    border-radius: 12px;
    border: 1px solid var(--ds-border, rgba(255,255,255,0.08));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.stock-list-header[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #292524 0%, #44403c 55%, #57534e 100%);
    padding: 1.5rem;
    border-bottom: 3px solid var(--ss-accent);
}

.stock-list-title[b-v5ljmvd0n8] {
    color: #fffefb;
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
}

.stock-list-body[b-v5ljmvd0n8] {
    padding: 1.5rem;
}

.stock-actions[b-v5ljmvd0n8] {
    margin-bottom: 1rem;
}

.btn-stock[b-v5ljmvd0n8] {
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    color: white;
}

.btn-stock:hover[b-v5ljmvd0n8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-stock-green[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.btn-stock-orange[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.btn-stock-grey[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
}

.btn-stock-print-manquants[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    box-shadow: 0 2px 6px rgba(229, 62, 62, 0.3);
}

.btn-stock-print-manquants:hover[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, #c53030 0%, #9b2c2c 100%);
    box-shadow: 0 4px 10px rgba(229, 62, 62, 0.4);
    transform: translateY(-2px);
}

.btn-filter[b-v5ljmvd0n8] {
    border: 1.5px solid var(--ds-border, rgba(255,255,255,0.15));
    background: var(--ds-bg-surface, #1c2330);
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    color: var(--ds-text-muted, #94a3b8);
}

.btn-filter:hover[b-v5ljmvd0n8] {
    border-color: var(--ss-accent);
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.btn-filter-active[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-accent-soft) 0%, var(--ss-accent) 50%, var(--ss-accent-dark) 100%);
    border-color: var(--ss-accent);
    color: white;
}

.btn-filter-active:hover[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-accent) 0%, var(--ss-accent-dark) 100%);
}

/* ========== STOCK TABLE ========== */
.stock-table-container[b-v5ljmvd0n8] {
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--ds-border, rgba(255,255,255,0.08));
    border-radius: 8px;
}

.stock-table[b-v5ljmvd0n8] {
    width: 100%;
    border-collapse: collapse;
    background: var(--ds-bg-surface, #1c2330);
}

.stock-table thead[b-v5ljmvd0n8] {
    background: var(--ds-bg-app, #0f172a);
    position: sticky;
    top: 0;
    z-index: 10;
}

.stock-table th[b-v5ljmvd0n8] {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ds-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--ds-border, rgba(255,255,255,0.1));
}

.stock-table td[b-v5ljmvd0n8] {
    padding: 1rem;
    border-bottom: 1px solid var(--ds-border, rgba(255,255,255,0.06));
    color: var(--ds-text, #e2e8f0);
    font-size: 0.95rem;
}

.stock-table tbody tr:hover[b-v5ljmvd0n8] {
    background: rgba(255, 255, 255, 0.04);
}

.stock-table tbody tr:last-child td[b-v5ljmvd0n8] {
    border-bottom: none;
}

.btn-print-small[b-v5ljmvd0n8] {
    border: none;
    background: linear-gradient(135deg, var(--ss-accent-soft) 0%, var(--ss-accent) 50%, var(--ss-accent-dark) 100%);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-print-small:hover[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ss-accent) 0%, var(--ss-accent-dark) 100%);
    transform: translateY(-1px);
}

.badge-genre[b-v5ljmvd0n8] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
}

.badge-femme[b-v5ljmvd0n8] {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.badge-homme[b-v5ljmvd0n8] {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.badge-stock[b-v5ljmvd0n8] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.badge-stock-zero[b-v5ljmvd0n8] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.stock-table input[type="checkbox"][b-v5ljmvd0n8] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ss-accent);
}

/* ========== SUMMARY FOOTER ========== */
.summary-footer[b-v5ljmvd0n8] {
    background: linear-gradient(135deg, var(--ds-bg-elevated, #2d3748) 0%, var(--ds-bg-surface, #1a202c) 100%);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    margin-top: 2rem;
    border: 1px solid var(--ds-border, transparent);
}

.summary-item[b-v5ljmvd0n8] {
    text-align: center;
    flex: 1;
}

.summary-label[b-v5ljmvd0n8] {
    color: var(--ds-text-sub, rgba(255, 255, 255, 0.8));
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.summary-value[b-v5ljmvd0n8] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.summary-global[b-v5ljmvd0n8] {
    color: #4ade80;
}

.summary-femme[b-v5ljmvd0n8] {
    color: #fb923c;
}

.summary-homme[b-v5ljmvd0n8] {
    color: #94a3b8;
}

/* Responsive — tablette / mobile */
@media (max-width: 991.98px) {
    .saisie-sorties-container[b-v5ljmvd0n8] {
        min-height: auto;
    }

    /* Colonnes Femmes / Hommes : pleine largeur + espacement */
    .saisie-sorties-container .row.g-4 > [class*="col-"][b-v5ljmvd0n8] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .parfums-list-header .d-flex.w-100[b-v5ljmvd0n8] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .parfums-list-header .d-flex.gap-2[b-v5ljmvd0n8] {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem !important;
    }

    .parfums-list-title[b-v5ljmvd0n8] {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .saisie-sorties-container[b-v5ljmvd0n8] {
        padding: 1rem;
        overflow-x: hidden;
    }

    .saisie-header .row[b-v5ljmvd0n8] {
        text-align: center;
    }

    .saisie-header .col-md-6.text-end[b-v5ljmvd0n8] {
        text-align: center !important;
    }

    .saisie-title[b-v5ljmvd0n8] {
        font-size: 1.5rem;
        justify-content: center;
        width: 100%;
        margin-top: 0.5rem;
    }

    .batch-input-group[b-v5ljmvd0n8] {
        flex-direction: column;
    }

    .btn-add-lot[b-v5ljmvd0n8] {
        width: 100%;
        justify-content: center;
    }

    .parfums-list-header[b-v5ljmvd0n8] {
        padding: 1rem 1rem;
    }

    .parfums-list-items[b-v5ljmvd0n8] {
        max-height: min(60vh, 520px);
    }

    .parfum-list-item[b-v5ljmvd0n8] {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem 0.75rem;
        padding: 0.75rem 1rem;
    }

    .parfum-name[b-v5ljmvd0n8] {
        min-width: 0;
        word-break: break-word;
        flex: 1 1 120px;
    }

    .parfum-actions[b-v5ljmvd0n8] {
        margin-left: auto;
    }

    .summary-footer[b-v5ljmvd0n8] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .summary-value[b-v5ljmvd0n8] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .saisie-sorties-container[b-v5ljmvd0n8] {
        padding: 0.75rem 0.5rem;
    }

    .saisie-title[b-v5ljmvd0n8] {
        font-size: 1.25rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .parfums-list-title[b-v5ljmvd0n8] {
        font-size: 1.05rem;
    }

    .parfums-list-header .btn-light[b-v5ljmvd0n8] {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    .parfum-list-item[b-v5ljmvd0n8] {
        padding: 0.65rem 0.75rem;
    }

    .btn-quantity[b-v5ljmvd0n8] {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }
}
/* /Pages/Statistiques.razor.rz.scp.css */
/* Modern Statistics Dashboard Styles */

[b-6u023hyulx] .stats-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

[b-6u023hyulx] .stats-header {
    margin-bottom: 2rem;
}

[b-6u023hyulx] .stats-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin: 0;
}

/* Stat Card Base Styles */
[b-6u023hyulx] .stat-card {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-left: 5px solid;
    animation: fadeInUp-b-6u023hyulx 0.5s ease-out;
    animation-fill-mode: both;
}

[b-6u023hyulx] .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

[b-6u023hyulx] .stat-card:hover::before {
    transform: translateX(100%);
}

[b-6u023hyulx] .stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

@keyframes fadeInUp-b-6u023hyulx {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Colors */
[b-6u023hyulx] .stat-card-reporte {
    border-left-color: #4a5568;
    animation-delay: 0.1s;
}

[b-6u023hyulx] .stat-card-ozon {
    border-left-color: #9f7aea;
    animation-delay: 0.2s;
}

[b-6u023hyulx] .stat-card-proposition {
    border-left-color: #6366f1;
    animation-delay: 0.05s;
}

[b-6u023hyulx] .stat-card-preparation {
    border-left-color: #ed8936;
    animation-delay: 0.3s;
}

[b-6u023hyulx] .stat-card-total {
    border-left-color: #4299e1;
    animation-delay: 0.4s;
    background: linear-gradient(135deg, #ffffff 0%, #e6f2ff 100%);
}

[b-6u023hyulx] .stat-card-retourne {
    border-left-color: #fc8181;
    animation-delay: 0.5s;
}

[b-6u023hyulx] .stat-card-annule {
    border-left-color: #f56565;
    animation-delay: 0.6s;
}

[b-6u023hyulx] .stat-card-livre {
    border-left-color: #48bb78;
    animation-delay: 0.7s;
}

[b-6u023hyulx] .stat-card-expedie {
    border-left-color: #38b2ac;
    animation-delay: 0.8s;
}

[b-6u023hyulx] .stat-card-net {
    border-left-color: #48bb78;
    background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
    animation-delay: 0.9s;
}

[b-6u023hyulx] .stat-card-revenu {
    border-left-color: #4299e1;
    background: linear-gradient(135deg, #ffffff 0%, #e6f2ff 100%);
    animation-delay: 1s;
}

/* Stat Content Layout */
[b-6u023hyulx] .stat-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

[b-6u023hyulx] .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

[b-6u023hyulx] .stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Icon Colors */
[b-6u023hyulx] .stat-card-reporte .stat-icon {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-ozon .stat-icon {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-preparation .stat-icon {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-total .stat-icon {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-retourne .stat-icon {
    background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-annule .stat-icon {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-livre .stat-icon {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-expedie .stat-icon {
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-net .stat-icon {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
}

[b-6u023hyulx] .stat-card-revenu .stat-icon {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    color: white;
}

/* Stat Content */
[b-6u023hyulx] .stat-content {
    flex: 1;
}

[b-6u023hyulx] .stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

[b-6u023hyulx] .stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: #2d3748;
    line-height: 1;
}

[b-6u023hyulx] .stat-value-financial {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    line-height: 1;
}

/* Financial Cards Special Styles */
[b-6u023hyulx] .stat-card-financial {
    min-height: 140px;
    padding: 2rem;
}

[b-6u023hyulx] .stat-card-financial .stat-icon {
    width: 70px;
    height: 70px;
}

[b-6u023hyulx] .stat-card-financial:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Responsive Design */
@media (max-width: 768px) {
    [b-6u023hyulx] .stats-title {
        font-size: 1.75rem;
    }

    [b-6u023hyulx] .stat-card {
        padding: 1.5rem;
    }

    [b-6u023hyulx] .stat-icon {
        width: 50px;
        height: 50px;
    }

    [b-6u023hyulx] .stat-icon svg {
        width: 20px;
        height: 20px;
    }

    [b-6u023hyulx] .stat-value {
        font-size: 1.75rem;
    }

    [b-6u023hyulx] .stat-value-financial {
        font-size: 1.5rem;
    }

    [b-6u023hyulx] .stat-card-financial {
        min-height: 120px;
        padding: 1.5rem;
    }

    [b-6u023hyulx] .stat-card-financial .stat-icon {
        width: 60px;
        height: 60px;
    }
}

/* Pulse Animation for Values */
@keyframes pulse-b-6u023hyulx {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

[b-6u023hyulx] .stat-card:hover .stat-value,
[b-6u023hyulx] .stat-card:hover .stat-value-financial {
    animation: pulse-b-6u023hyulx 2s ease-in-out infinite;
}
/* /Pages/StatistiquesBoutique.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   STATISTIQUES BOUTIQUE — Dashboard Analytics, Dark SaaS style
═══════════════════════════════════════════════════════════════ */

/* ── Period selector ────────────────────────────────────────── */
.sb-period-group[b-fdk5yz9zcu] {
    display: flex;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    overflow: hidden;
}

.sb-period-btn[b-fdk5yz9zcu] {
    padding: 5px 14px;
    background: transparent;
    border: none;
    color: var(--ds-text-sub);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms;
}

.sb-period-btn:hover[b-fdk5yz9zcu]  { color: var(--ds-text); }
.sb-period-btn.active[b-fdk5yz9zcu] { background: #00a884; color: #fff; border-radius: 999px; }

.sb-page-actions[b-fdk5yz9zcu] {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.sb-filters-wrap[b-fdk5yz9zcu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 40;
}

.sb-custom-range[b-fdk5yz9zcu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    overflow: visible;
}

.sb-custom-apply[b-fdk5yz9zcu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #00a884;
    color: #fff;
    cursor: pointer;
    transition: background 150ms;
}

.sb-custom-apply:hover[b-fdk5yz9zcu] { background: #009670; }

/* Agenda période personnalisée (DateRangePicker) */
.sb-custom-range[b-fdk5yz9zcu]  .drp--stats.drp-root {
    display: inline-flex;
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-trigger {
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--ds-text);
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 700;
    box-shadow: none;
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-trigger:hover:not(:disabled) {
    background: rgba(0, 168, 132, 0.1);
    color: var(--ds-text);
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-trigger-icon,
.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-chevron {
    color: #00a884;
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-sep-icon {
    color: var(--ds-text-muted);
    font-size: 10px;
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-popover {
    border: 1px solid var(--ds-border);
    background: var(--ds-bg-surface);
    box-shadow: var(--ds-shadow-lg);
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-month,
.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-day {
    color: var(--ds-text);
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-nav {
    border-color: var(--ds-border);
    color: var(--ds-text-muted);
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-nav:hover {
    color: #00a884;
    border-color: rgba(0, 168, 132, 0.35);
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-quick-btn {
    border-color: rgba(0, 168, 132, 0.28);
    background: rgba(0, 168, 132, 0.1);
    color: #5eead4;
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-day:hover:not(:disabled) {
    background: rgba(0, 168, 132, 0.12);
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-day--today {
    box-shadow: inset 0 0 0 1px rgba(0, 168, 132, 0.55);
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-day--start,
.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-day--end {
    background: #00a884;
    color: #003d33;
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-day--in-range {
    background: rgba(0, 168, 132, 0.16);
    color: #99f6e4;
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-btn {
    border-color: var(--ds-border);
    color: var(--ds-text-muted);
}

.sb-custom-range[b-fdk5yz9zcu]  .drp--stats .drp-btn--apply {
    background: #00a884;
    color: #fff;
}

/* ── Loading ─────────────────────────────────────────────────── */
.sb-loading[b-fdk5yz9zcu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--ds-text-sub);
    font-size: .85rem;
}

.sb-spinner[b-fdk5yz9zcu] {
    width: 36px; height: 36px;
    border: 3px solid var(--ds-border);
    border-top-color: #00a884;
    border-radius: 50%;
    animation: sbSpin-b-fdk5yz9zcu .8s linear infinite;
}

.sb-spin[b-fdk5yz9zcu] { animation: sbSpin-b-fdk5yz9zcu .7s linear infinite; }

/* ── KPI cards ──────────────────────────────────────────────── */
.sb-kpi-row[b-fdk5yz9zcu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.sb-kpi-card[b-fdk5yz9zcu] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow 200ms, transform 200ms;
    animation: sbFadeIn-b-fdk5yz9zcu .3s ease both;
}

.sb-kpi-card:hover[b-fdk5yz9zcu] {
    box-shadow: 0 6px 24px rgba(0,0,0,.3);
    transform: translateY(-2px);
}

.sb-kpi-icon[b-fdk5yz9zcu] {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.sb-kpi-card.green .sb-kpi-icon[b-fdk5yz9zcu] { background: rgba(0,168,132,.15); color: #00a884; }
.sb-kpi-card.blue  .sb-kpi-icon[b-fdk5yz9zcu] { background: rgba(83,189,235,.15); color: #53bdeb; }
.sb-kpi-card.yellow.sb-kpi-icon[b-fdk5yz9zcu] { background: rgba(255,212,38,.15); color: #ffd426; }
.sb-kpi-card.teal  .sb-kpi-icon[b-fdk5yz9zcu] { background: rgba(45,212,191,.15); color: #2dd4bf; }
.sb-kpi-card.yellow .sb-kpi-icon[b-fdk5yz9zcu] { background: rgba(255,212,38,.15); color: #ffd426; }

.sb-kpi-body[b-fdk5yz9zcu] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.sb-kpi-val[b-fdk5yz9zcu] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ds-text);
}

.sb-kpi-lbl[b-fdk5yz9zcu] {
    font-size: .72rem;
    color: var(--ds-text-sub);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sb-kpi-sub[b-fdk5yz9zcu] {
    font-size: .72rem;
    color: #00a884;
    margin-top: 2px;
}

.sb-kpi-sub.warning[b-fdk5yz9zcu] { color: #ffd426; }

/* ── Section header ─────────────────────────────────────────── */
.sb-section-header[b-fdk5yz9zcu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ds-text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--ds-border);
}

.sb-period-label[b-fdk5yz9zcu] { color: var(--ds-accent); }

.sb-mini-select[b-fdk5yz9zcu] {
    margin-left: auto;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-sub);
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

/* ── Performance par boutique (tableau principal) ─────────── */
.sb-performance-card[b-fdk5yz9zcu] {
    margin-bottom: 24px;
    padding: 0 !important;
    overflow: hidden;
}

.sb-performance-header[b-fdk5yz9zcu] {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--ds-border);
    margin-bottom: 0 !important;
}

.sb-performance-title-block[b-fdk5yz9zcu] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sb-performance-title-block > i[b-fdk5yz9zcu] {
    font-size: 1.5rem;
    color: var(--ds-accent);
    margin-top: 2px;
}

.sb-performance-title[b-fdk5yz9zcu] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ds-text);
    letter-spacing: -.02em;
}

.sb-performance-sub[b-fdk5yz9zcu] {
    margin-top: 6px;
    font-size: .85rem;
    color: var(--ds-text-sub);
}

.sb-perf-table-wrap[b-fdk5yz9zcu] {
    overflow-x: auto;
    padding: 8px 12px 20px;
}

.sb-perf-table[b-fdk5yz9zcu] {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}

.sb-perf-table thead th[b-fdk5yz9zcu] {
    padding: 14px 18px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ds-text-muted);
    text-align: left;
    border-bottom: 2px solid var(--ds-border);
    background: var(--ds-bg-elevated);
    white-space: nowrap;
}

.sb-perf-th-num[b-fdk5yz9zcu],
.sb-perf-num[b-fdk5yz9zcu] {
    text-align: right !important;
}

.sb-perf-th-action[b-fdk5yz9zcu],
.sb-perf-action[b-fdk5yz9zcu] {
    text-align: center !important;
    width: 88px;
}

.sb-perf-th-store[b-fdk5yz9zcu] {
    min-width: 240px;
    width: 28%;
}

.sb-perf-row td[b-fdk5yz9zcu] {
    padding: 18px 18px;
    font-size: .95rem;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
    transition: background 150ms;
}

.sb-perf-row:hover td[b-fdk5yz9zcu] {
    background: var(--ds-bg-elevated);
}

.sb-perf-row.current td[b-fdk5yz9zcu] {
    background: rgba(0, 168, 132, .06);
}

.sb-perf-row.current td:first-child[b-fdk5yz9zcu] {
    box-shadow: inset 4px 0 0 var(--store-color, #00a884);
}

.sb-perf-store[b-fdk5yz9zcu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    font-weight: 700;
    color: var(--ds-text);
    min-width: 200px;
}

.sb-store-name-text[b-fdk5yz9zcu] {
    font-size: 1rem;
    line-height: 1.35;
    word-break: break-word;
}

.sb-store-dot[b-fdk5yz9zcu] {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sb-current-tag[b-fdk5yz9zcu] {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 800;
    padding: 4px 10px;
    background: rgba(0,168,132,.18);
    color: #34d399;
    border: 1px solid rgba(0,168,132,.35);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.sb-perf-num[b-fdk5yz9zcu] {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ds-text-sub);
}

.sb-perf-num.green[b-fdk5yz9zcu]  { color: #34d399; font-size: 1.15rem; }
.sb-perf-num.blue[b-fdk5yz9zcu]   { color: #53bdeb; }
.sb-perf-num.teal[b-fdk5yz9zcu]   { color: #2dd4bf; }
.sb-perf-num.orange[b-fdk5yz9zcu] { color: #fb923c; }
.sb-perf-num.purple[b-fdk5yz9zcu] { color: #c4b5fd; font-size: 1.1rem; }
.sb-perf-num.muted[b-fdk5yz9zcu]  { color: var(--ds-text-muted); font-size: .9rem; }

.sb-perf-slash[b-fdk5yz9zcu] {
    margin: 0 4px;
    opacity: .5;
}

.sb-action-btn-lg[b-fdk5yz9zcu] {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    border-radius: 10px;
}

.sb-perf-detail-row > td[b-fdk5yz9zcu] {
    padding: 0 !important;
    border-bottom: 1px solid var(--ds-border);
    background: rgba(15, 23, 42, .4);
}

.sb-val[b-fdk5yz9zcu] {
    font-weight: 600;
    color: var(--ds-text-sub);
    text-align: right;
}

.sb-val.green[b-fdk5yz9zcu]  { color: #00a884; }
.sb-val.blue[b-fdk5yz9zcu]   { color: #53bdeb; }
.sb-val.yellow[b-fdk5yz9zcu] { color: #ffd426; }
.sb-val.red[b-fdk5yz9zcu]    { color: #ef4444; }
.sb-val.muted[b-fdk5yz9zcu]  { color: var(--ds-text-muted); }

.sb-table-empty[b-fdk5yz9zcu] {
    padding: 24px 16px;
    font-size: .82rem;
    color: var(--ds-text-muted);
    text-align: center;
}

.sb-action-btn[b-fdk5yz9zcu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    background: rgba(0,168,132,.12);
    border: 1px solid rgba(0,168,132,.25);
    color: #00a884;
    border-radius: 8px;
    text-decoration: none;
    font-size: .85rem;
    transition: all 150ms;
}

.sb-action-btn:hover[b-fdk5yz9zcu] { background: rgba(0,168,132,.25); }

/* ── Two-column layout ──────────────────────────────────────── */
.sb-two-col[b-fdk5yz9zcu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* ── Top products ───────────────────────────────────────────── */
.sb-top-list[b-fdk5yz9zcu] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.sb-top-item[b-fdk5yz9zcu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-border);
    transition: background 150ms;
    animation: sbFadeIn-b-fdk5yz9zcu .25s ease both;
}

.sb-top-item:last-child[b-fdk5yz9zcu] { border-bottom: none; }
.sb-top-item:hover[b-fdk5yz9zcu]      { background: var(--ds-bg-elevated); }

.sb-rank[b-fdk5yz9zcu] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-muted);
    font-size: .68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sb-rank.top[b-fdk5yz9zcu] {
    background: rgba(255,212,38,.15);
    border-color: rgba(255,212,38,.3);
    color: #ffd426;
}

.sb-top-body[b-fdk5yz9zcu] { flex: 1; min-width: 0; }

.sb-top-name[b-fdk5yz9zcu] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.sb-top-bar-wrap[b-fdk5yz9zcu] {
    height: 4px;
    background: var(--ds-bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.sb-top-bar[b-fdk5yz9zcu] {
    height: 100%;
    background: linear-gradient(90deg, #00a884, #00c49a);
    border-radius: 2px;
    transition: width .6s ease;
}

.sb-top-right[b-fdk5yz9zcu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 1px;
}

.sb-top-total[b-fdk5yz9zcu] { font-size: .78rem; font-weight: 700; color: #00a884; }
.sb-top-qty[b-fdk5yz9zcu]   { font-size: .68rem; color: var(--ds-text-muted); }

/* ── Low stock alerts ───────────────────────────────────────── */
.sb-mini-empty[b-fdk5yz9zcu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    font-size: .82rem;
    color: var(--ds-text-muted);
}

.sb-mini-empty.green[b-fdk5yz9zcu] { color: #00a884; }

.sb-alert-list[b-fdk5yz9zcu] {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.sb-alert-item[b-fdk5yz9zcu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--ds-border);
    animation: sbFadeIn-b-fdk5yz9zcu .2s ease both;
    font-size: .78rem;
}

.sb-alert-item:last-child[b-fdk5yz9zcu] { border-bottom: none; }
.sb-alert-item i[b-fdk5yz9zcu] { font-size: .85rem; flex-shrink: 0; }
.sb-alert-item.low i[b-fdk5yz9zcu] { color: #ffd426; }
.sb-alert-item.out i[b-fdk5yz9zcu] { color: #ef4444; }

.sb-alert-body[b-fdk5yz9zcu] { flex: 1; min-width: 0; }
.sb-alert-name[b-fdk5yz9zcu]  { font-weight: 600; color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-alert-store[b-fdk5yz9zcu] { font-size: .68rem; color: var(--ds-text-muted); margin-top: 1px; }

.sb-stock-badge[b-fdk5yz9zcu] {
    font-size: .68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.sb-stock-badge.low[b-fdk5yz9zcu] { background: rgba(255,212,38,.15); color: #ffd426; }
.sb-stock-badge.out[b-fdk5yz9zcu] { background: rgba(239,68,68,.15);  color: #ef4444; }

.sb-alert-more[b-fdk5yz9zcu] {
    padding: 10px 16px;
    font-size: .72rem;
    color: var(--ds-text-muted);
    text-align: center;
}

/* ── Offline queue panel ────────────────────────────────────── */
.sb-offline-panel[b-fdk5yz9zcu] {
    border: 1px solid rgba(255,212,38,.25) !important;
    background: rgba(255,212,38,.03) !important;
}

.sb-offline-list[b-fdk5yz9zcu] {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.sb-offline-item[b-fdk5yz9zcu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ds-border);
    font-size: .8rem;
}

.sb-offline-item:last-child[b-fdk5yz9zcu] { border-bottom: none; }

.sb-offline-info[b-fdk5yz9zcu] { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sb-offline-id[b-fdk5yz9zcu]   { font-weight: 700; color: var(--ds-text); font-family: monospace; font-size: .75rem; }
.sb-offline-meta[b-fdk5yz9zcu] { font-size: .68rem; color: var(--ds-text-muted); }
.sb-offline-amt[b-fdk5yz9zcu]  { font-weight: 700; color: #ffd426; white-space: nowrap; }

.sb-sync-btn[b-fdk5yz9zcu] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(83,189,235,.12);
    border: 1px solid rgba(83,189,235,.25);
    color: #53bdeb;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    transition: all 150ms;
    white-space: nowrap;
}

.sb-sync-btn:hover[b-fdk5yz9zcu] { background: rgba(83,189,235,.25); }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes sbFadeIn-b-fdk5yz9zcu { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sbSpin-b-fdk5yz9zcu   { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sb-two-col[b-fdk5yz9zcu] { grid-template-columns: 1fr; }
    .sb-perf-hide-sm[b-fdk5yz9zcu] { display: none; }
    .sb-perf-row td[b-fdk5yz9zcu] { padding: 14px 12px; }
    .sb-perf-num.green[b-fdk5yz9zcu] { font-size: 1.05rem; }
}

@media (max-width: 600px) {
    .sb-kpi-row[b-fdk5yz9zcu] { grid-template-columns: 1fr 1fr; }
}

.sb-kpi-card.orange .sb-kpi-icon[b-fdk5yz9zcu] { background: rgba(249,115,22,.15); color: #fb923c; }
.sb-kpi-card.purple .sb-kpi-icon[b-fdk5yz9zcu] { background: rgba(139,92,246,.15); color: #a78bfa; }
.sb-kpi-val.neg[b-fdk5yz9zcu] { color: #f87171; }
.sb-api-warn[b-fdk5yz9zcu] { color: #fbbf24; font-size: .8rem; }
.sb-hint[b-fdk5yz9zcu] { font-size: .7rem; color: var(--ds-text-muted); font-weight: 500; margin-left: 6px; }

.sb-val.teal[b-fdk5yz9zcu] { color: #2dd4bf; }
.sb-val.orange[b-fdk5yz9zcu] { color: #fb923c; }
.sb-val.purple[b-fdk5yz9zcu] { color: #c4b5fd; }

.sb-row-actions[b-fdk5yz9zcu] { display: flex; gap: 6px; align-items: center; }

.sb-store-detail[b-fdk5yz9zcu] {
    padding: 18px 20px 20px 28px;
    background: rgba(15,23,42,.55);
    border-top: 1px dashed rgba(148,163,184,.25);
    border-left: 3px solid var(--store-color, #00a884);
}

.sb-detail-kpis[b-fdk5yz9zcu] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-bottom: 14px;
    font-size: .82rem;
    color: var(--ds-text-sub);
}

.sb-detail-toolbar[b-fdk5yz9zcu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.sb-detail-toolbar-title[b-fdk5yz9zcu] { font-weight: 700; font-size: .82rem; color: var(--ds-text); }

.sb-ledger-empty[b-fdk5yz9zcu] {
    padding: 12px;
    font-size: .8rem;
    color: var(--ds-text-muted);
    font-style: italic;
}

.sb-mvt-table-wrap[b-fdk5yz9zcu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 12px;
}
.sb-mvt-table-head[b-fdk5yz9zcu],
.sb-mvt-row[b-fdk5yz9zcu] {
    display: grid;
    grid-template-columns: 130px 72px 1fr 52px 1fr 72px;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    font-size: .76rem;
}
.sb-mvt-table-head[b-fdk5yz9zcu] {
    font-weight: 700;
    color: var(--ds-text-sub);
    background: rgba(255,255,255,.04);
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--ds-border);
}
.sb-mvt-table-head--stock[b-fdk5yz9zcu],
.sb-mvt-row--stock[b-fdk5yz9zcu] {
    grid-template-columns: 1fr 120px 72px;
}
.sb-mvt-table-head--sales[b-fdk5yz9zcu],
.sb-mvt-row--sale[b-fdk5yz9zcu] {
    grid-template-columns: 130px 1fr 52px 72px 90px 100px;
}
.sb-mvt-row[b-fdk5yz9zcu] {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--ds-border);
    border-top: none;
}
.sb-mvt-row.entree[b-fdk5yz9zcu] { border-left: 3px solid #2dd4bf; }
.sb-mvt-row.sortie[b-fdk5yz9zcu] { border-left: 3px solid #fb923c; }
.sb-mvt-name[b-fdk5yz9zcu] { font-weight: 600; color: var(--ds-text); }
.sb-mvt-name small[b-fdk5yz9zcu] { font-weight: 400; color: var(--ds-text-muted); }
.sb-sales-lines-title[b-fdk5yz9zcu] {
    font-weight: 700;
    font-size: .78rem;
    color: var(--ds-text-sub);
    margin: 4px 0 8px;
}
.sb-print-host[b-fdk5yz9zcu] { display: none !important; }
/* /Pages/StockMatierePremiere.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Stock Matières Premières — thème design-system (dark / light)
   ═══════════════════════════════════════════════════════════════ */

.stock-matiere-premiere-container[b-tmxejozpl6] {
    padding: 1.5rem 1.25rem 2.5rem;
    min-height: 100vh;
    color: var(--ds-text);
    max-width: 1500px;
    margin: 0 auto;
}

.stock-matiere-premiere-container .main-title[b-tmxejozpl6] {
    font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
    font-weight: 700 !important;
    color: var(--ds-text) !important;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem !important;
}

.stock-matiere-premiere-container .mp-section-heading[b-tmxejozpl6] {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ds-text) !important;
}

/* ── Cartes principales ─────────────────────────────────────── */
.stock-matiere-premiere-container > .container-fluid > .card[b-tmxejozpl6],
.stock-matiere-premiere-container .mp-stock-live-card[b-tmxejozpl6] {
    background: var(--ds-bg-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow) !important;
}

.stock-matiere-premiere-container .mp-stock-live-card[b-tmxejozpl6] {
    border-top: 3px solid var(--ds-success) !important;
}

.stock-matiere-premiere-container .card .card[b-tmxejozpl6] {
    background: var(--ds-bg-elevated) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius) !important;
}

/* ── Titres & textes ────────────────────────────────────────── */
.stock-matiere-premiere-container h3[b-tmxejozpl6],
.stock-matiere-premiere-container h5[b-tmxejozpl6],
.stock-matiere-premiere-container .form-section-title[b-tmxejozpl6],
.stock-matiere-premiere-container .card-title[b-tmxejozpl6],
.stock-matiere-premiere-container .section-label[b-tmxejozpl6] {
    color: var(--ds-text) !important;
}

.stock-matiere-premiere-container .text-muted[b-tmxejozpl6],
.stock-matiere-premiere-container small.text-muted[b-tmxejozpl6] {
    color: var(--ds-text-muted) !important;
}

.stock-matiere-premiere-container .form-label[b-tmxejozpl6] {
    color: var(--ds-text-sub) !important;
    font-weight: 600 !important;
}

.stock-matiere-premiere-container .category-indicator[b-tmxejozpl6] {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--ds-accent-dim);
    border: 1px solid rgba(249, 115, 22, 0.35);
}

.stock-matiere-premiere-container .category-indicator .section-label[b-tmxejozpl6] {
    color: var(--ds-accent-hover) !important;
    font-weight: 600 !important;
}

/* ── Formulaires ────────────────────────────────────────────── */
.stock-matiere-premiere-container .form-control[b-tmxejozpl6],
.stock-matiere-premiere-container .form-select[b-tmxejozpl6],
.stock-matiere-premiere-container textarea.form-control[b-tmxejozpl6] {
    background: var(--ds-bg-elevated) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text) !important;
    border-radius: var(--ds-radius-sm) !important;
    color-scheme: dark;
}

.stock-matiere-premiere-container .form-control:focus[b-tmxejozpl6],
.stock-matiere-premiere-container .form-select:focus[b-tmxejozpl6],
.stock-matiere-premiere-container textarea.form-control:focus[b-tmxejozpl6] {
    border-color: var(--ds-border-focus) !important;
    box-shadow: var(--ds-shadow-focus) !important;
    outline: none;
}

.stock-matiere-premiere-container .form-select[b-tmxejozpl6] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239c948a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.85rem center !important;
    padding-right: 2.25rem !important;
}

.stock-matiere-premiere-container .form-select option[b-tmxejozpl6] {
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
}

.stock-matiere-premiere-container .input-group-text[b-tmxejozpl6] {
    background: var(--ds-bg-surface) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text-muted) !important;
}

.stock-matiere-premiere-container .input-group .form-control[b-tmxejozpl6],
.stock-matiere-premiere-container .input-group .form-select[b-tmxejozpl6] {
    border-right: none;
}

.stock-matiere-premiere-container .input-group .input-group-text[b-tmxejozpl6] {
    border-left: none !important;
}

/* ── Alertes & encarts ───────────────────────────────────────── */
.stock-matiere-premiere-container .alert-light[b-tmxejozpl6] {
    background: var(--ds-bg-elevated) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text-sub) !important;
}

.stock-matiere-premiere-container .mp-notice-warning[b-tmxejozpl6],
.modal-content .mp-notice-warning[b-tmxejozpl6] {
    background: var(--ds-warning-dim) !important;
    border: 1px solid rgba(210, 153, 34, 0.45) !important;
    color: var(--ds-text) !important;
}

.stock-matiere-premiere-container .bg-light[b-tmxejozpl6] {
    background: var(--ds-bg-elevated) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border);
}

.stock-matiere-premiere-container .fw-bold.text-primary[b-tmxejozpl6] {
    color: var(--ds-accent-hover) !important;
}

/* ── Tableaux ─────────────────────────────────────────────────── */
.stock-matiere-premiere-container .table[b-tmxejozpl6] {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-text);
    --bs-table-border-color: var(--ds-border);
    margin-bottom: 0;
}

.stock-matiere-premiere-container .table tbody td[b-tmxejozpl6] {
    border-color: var(--ds-border) !important;
    color: var(--ds-text) !important;
    vertical-align: middle;
}

.stock-matiere-premiere-container .table tbody tr[b-tmxejozpl6] {
    border-color: var(--ds-border) !important;
}

.stock-matiere-premiere-container .table-hover tbody tr:hover td[b-tmxejozpl6] {
    background: var(--ds-bg-elevated) !important;
}

.stock-matiere-premiere-container .table thead tr[b-tmxejozpl6] {
    /* Conserve les en-têtes colorés (vert / bleu) */
}

/* ── Boutons outline ──────────────────────────────────────────── */
.stock-matiere-premiere-container .btn-outline-primary[b-tmxejozpl6] {
    color: var(--ds-accent-hover) !important;
    border-color: rgba(249, 115, 22, 0.45) !important;
    background: transparent !important;
}

.stock-matiere-premiere-container .btn-outline-primary:hover[b-tmxejozpl6] {
    background: var(--ds-accent-dim) !important;
    color: var(--ds-text) !important;
    border-color: var(--ds-accent) !important;
}

.stock-matiere-premiere-container .btn-outline-secondary[b-tmxejozpl6] {
    color: var(--ds-text-sub) !important;
    border-color: var(--ds-border) !important;
    background: transparent !important;
}

.stock-matiere-premiere-container .btn-outline-secondary:hover[b-tmxejozpl6] {
    background: var(--ds-bg-elevated) !important;
    color: var(--ds-text) !important;
}

.stock-matiere-premiere-container .btn-outline-danger[b-tmxejozpl6] {
    border-color: rgba(248, 81, 73, 0.45) !important;
}

/* ── Modales (hors container mais même composant) ─────────────── */
.modal-overlay[b-tmxejozpl6] {
    position: fixed !important;
    inset: 0 !important;
    background: var(--ds-bg-overlay) !important;
    z-index: 1050 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: 1rem;
}

.modal-content[b-tmxejozpl6] {
    background: var(--ds-bg-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    padding: 1.75rem !important;
    color: var(--ds-text) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}

.modal-title[b-tmxejozpl6] {
    font-weight: 600 !important;
    color: var(--ds-text) !important;
    margin: 0 !important;
}

.modal-content .btn-close[b-tmxejozpl6] {
    color: var(--ds-text-muted) !important;
    opacity: 1;
    filter: none;
    background: none !important;
    border: none !important;
}

.modal-content .table tbody td[b-tmxejozpl6] {
    border-color: var(--ds-border) !important;
    color: var(--ds-text) !important;
}

.modal-content .form-control[b-tmxejozpl6],
.modal-content .form-select[b-tmxejozpl6] {
    background: var(--ds-bg-elevated) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text) !important;
    color-scheme: dark;
}

.modal-content .form-select option[b-tmxejozpl6] {
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
}

.modal-content .bg-light[b-tmxejozpl6] {
    background: var(--ds-bg-elevated) !important;
    color: var(--ds-text) !important;
    border: 1px solid var(--ds-border);
}

.modal-content h6[b-tmxejozpl6] {
    color: var(--ds-text) !important;
}

/* ── Thème clair ──────────────────────────────────────────────── */
html[data-theme="light"] .stock-matiere-premiere-container .form-control[b-tmxejozpl6],
html[data-theme="light"] .stock-matiere-premiere-container .form-select[b-tmxejozpl6],
html[data-theme="light"] .stock-matiere-premiere-container textarea.form-control[b-tmxejozpl6],
html[data-theme="light"] .modal-content .form-control[b-tmxejozpl6],
html[data-theme="light"] .modal-content .form-select[b-tmxejozpl6] {
    color-scheme: light;
}

html[data-theme="light"] .stock-matiere-premiere-container .form-select[b-tmxejozpl6] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2378716c' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .stock-matiere-premiere-container[b-tmxejozpl6] {
        padding: 1rem 0.75rem 2rem;
    }

    .modal-content[b-tmxejozpl6] {
        padding: 1.25rem !important;
        width: 96% !important;
    }
}
/* /Pages/StockParfum.razor.rz.scp.css */
/* Styles moved inline to StockParfum.razor <style> block */
/* /Pages/StockProduit.razor.rz.scp.css */
/* ============================================================
   StockProduit — Dark SaaS theme (design-system tokens)
   ============================================================ */

/* ── Container ── */
.stock-produit-container[b-ab5t3tjmko] {
    padding: 2rem;
    background: transparent;
    min-height: 100vh;
}

/* ── Form card ── */
.produit-form-card[b-ab5t3tjmko] {
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow) !important;
    border: 1px solid var(--ds-border) !important;
    overflow: hidden;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    background: var(--ds-bg-surface) !important;
    transition: box-shadow var(--ds-duration) var(--ds-ease);
}

.produit-form-card:hover[b-ab5t3tjmko] {
    box-shadow: var(--ds-shadow-lg) !important;
}

/* ── Card header ── */
.produit-form-header[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 1.4rem 2rem;
    position: relative;
}

.produit-form-header[b-ab5t3tjmko]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg, var(--ds-accent), #7c3aed);
    border-radius: 0 2px 2px 0;
}

.produit-form-title[b-ab5t3tjmko] {
    color: var(--ds-text) !important;
    font-weight: 700;
    font-size: 1.35rem;
    margin: 0;
    display: flex;
    align-items: center;
    letter-spacing: -0.02em;
}

.stock-underline[b-ab5t3tjmko] {
    text-decoration: underline;
    text-decoration-color: var(--ds-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    color: var(--ds-accent) !important;
}

/* ── Card body ── */
.produit-form-body[b-ab5t3tjmko] {
    padding: 2rem;
    background: var(--ds-bg-surface) !important;
}

/* ── Form labels ── */
.form-label-custom[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--ds-text-sub) !important;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.label-icon[b-ab5t3tjmko] {
    color: var(--ds-accent);
    font-size: 0.85rem;
}

.label-icon.barcode[b-ab5t3tjmko] {
    font-weight: 700;
    color: var(--ds-text-muted);
}

/* ── Form controls ── */
.form-control-custom[b-ab5t3tjmko] {
    width: 100%;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 0.65rem 1rem;
    font-size: 0.93rem;
    color: var(--ds-text);
    background: var(--ds-bg-elevated);
    transition: border-color var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease);
}

.form-control-custom[b-ab5t3tjmko]::placeholder {
    color: var(--ds-text-muted);
}

.form-control-custom:hover[b-ab5t3tjmko] {
    border-color: var(--ds-text-muted);
}

.form-control-custom:focus[b-ab5t3tjmko] {
    border-color: var(--ds-border-focus);
    box-shadow: 0 0 0 3px var(--ds-accent-ring);
    outline: none;
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
}

select.form-control-custom[b-ab5t3tjmko] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

select.form-control-custom option[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
}

/* ── Input + button combo ── */
.input-with-btn[b-ab5t3tjmko] {
    display: flex;
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    overflow: hidden;
    transition: border-color var(--ds-duration), box-shadow var(--ds-duration);
}

.input-with-btn:focus-within[b-ab5t3tjmko] {
    border-color: var(--ds-border-focus);
    box-shadow: 0 0 0 3px var(--ds-accent-ring);
}

.input-with-btn .form-control-custom[b-ab5t3tjmko] {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--ds-bg-elevated) !important;
}

.input-with-btn.btn-right .form-control-custom[b-ab5t3tjmko] { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-with-btn.btn-right .btn-icon[b-ab5t3tjmko]            { border-top-left-radius: 0 !important;  border-bottom-left-radius: 0 !important; }
.input-with-btn.btn-left  .btn-icon[b-ab5t3tjmko]            { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-with-btn.btn-left  .form-control-custom[b-ab5t3tjmko] { border-top-left-radius: 0 !important;  border-bottom-left-radius: 0 !important; }

/* ── Icon buttons ── */
.btn-icon[b-ab5t3tjmko] {
    width: 46px;
    min-width: 46px;
    height: auto;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ds-duration) var(--ds-ease);
    flex-shrink: 0;
}

.btn-camera[b-ab5t3tjmko] {
    background: var(--ds-bg-surface);
    border-left: 1px solid var(--ds-border);
}

.btn-camera:hover[b-ab5t3tjmko] { background: var(--ds-accent); }

.btn-scan[b-ab5t3tjmko] {
    background: var(--ds-accent);
}

.btn-scan:hover[b-ab5t3tjmko] { background: var(--ds-accent-hover); }

/* ── Form actions ── */
.form-actions[b-ab5t3tjmko] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ds-border);
}

.btn-ajouter[b-ab5t3tjmko] {
    background: var(--ds-accent);
    color: #fff;
    border: none;
    padding: 0.7rem 1.75rem;
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--ds-duration) var(--ds-ease);
    box-shadow: 0 4px 14px var(--ds-accent-ring);
}

.btn-ajouter:hover[b-ab5t3tjmko] {
    background: var(--ds-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--ds-accent-ring);
}

.btn-vider[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
    color: var(--ds-text-sub);
    border: 1px solid var(--ds-border);
    padding: 0.7rem 1.75rem;
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--ds-duration) var(--ds-ease);
}

.btn-vider:hover[b-ab5t3tjmko] {
    background: var(--ds-bg-surface);
    border-color: var(--ds-text-muted);
    color: var(--ds-text);
    transform: translateY(-2px);
}

/* ── Alerts ── */
.alert-custom[b-ab5t3tjmko] {
    margin-top: 1.25rem;
    padding: 0.9rem 1.2rem;
    border-radius: var(--ds-radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid transparent;
}

.alert-custom.alert-success[b-ab5t3tjmko] {
    background: var(--ds-success-dim);
    color: var(--ds-success);
    border-color: rgba(63, 185, 80, 0.3);
}

.alert-custom.alert-warning[b-ab5t3tjmko] {
    background: var(--ds-warning-dim);
    color: var(--ds-warning);
    border-color: rgba(210, 153, 34, 0.3);
}

.alert-custom.alert-info[b-ab5t3tjmko] {
    background: var(--ds-info-dim);
    color: var(--ds-info);
    border-color: rgba(121, 192, 255, 0.3);
}

.alert-custom.alert-danger[b-ab5t3tjmko] {
    background: var(--ds-danger-dim);
    color: var(--ds-danger);
    border-color: rgba(248, 81, 73, 0.3);
}

/* ── Filter / search bar ── */
.filter-search-bar[b-ab5t3tjmko] {
    margin-top: 1.5rem;
    background: var(--ds-bg-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

.filter-search-body[b-ab5t3tjmko] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    padding: 1.25rem 1.75rem;
}

.filter-label[b-ab5t3tjmko] {
    display: block;
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.form-control-filter[b-ab5t3tjmko] {
    min-width: 150px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font-size: 0.9rem;
    color: var(--ds-text);
    background: var(--ds-bg-elevated);
    transition: border-color var(--ds-duration), box-shadow var(--ds-duration);
}

.form-control-filter:focus[b-ab5t3tjmko] {
    border-color: var(--ds-border-focus);
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-accent-ring);
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
}

.form-control-filter[b-ab5t3tjmko]::placeholder { color: var(--ds-text-muted); }

select.form-control-filter[b-ab5t3tjmko] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

select.form-control-filter option[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
}

.filter-quantite-block[b-ab5t3tjmko],
.filter-produits-block[b-ab5t3tjmko] {
    display: flex;
    flex-direction: column;
}

.filter-produits-block .form-control-filter[b-ab5t3tjmko] { min-width: 175px; }

.recherche-block[b-ab5t3tjmko] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 200px;
}

.search-input-wrap[b-ab5t3tjmko] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrap .search-input[b-ab5t3tjmko] {
    flex: 1;
    min-width: 220px;
    padding-right: 2.5rem;
}

.search-input-wrap .search-icon[b-ab5t3tjmko] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-text-muted);
    pointer-events: none;
}

/* ── Filter action buttons ── */
.btn-recharger[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--ds-duration) var(--ds-ease);
    box-shadow: 0 2px 8px var(--ds-accent-ring);
}

.btn-recharger:hover[b-ab5t3tjmko] {
    background: var(--ds-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ds-accent-ring);
}

.btn-scan-filter[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-success);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--ds-duration) var(--ds-ease);
    box-shadow: 0 2px 8px rgba(63, 185, 80, 0.3);
}

.btn-scan-filter:hover[b-ab5t3tjmko] {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(63, 185, 80, 0.35);
}

/* ── Stock list card ── */
.liste-stock-global[b-ab5t3tjmko] {
    margin-top: 1.5rem;
    background: var(--ds-bg-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-lg) !important;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.liste-stock-header[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-bg-elevated) !important;
}

.liste-stock-title[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ds-text) !important;
}

.liste-stock-sep[b-ab5t3tjmko] {
    width: 4px;
    height: 26px;
    background: linear-gradient(180deg, var(--ds-accent), #7c3aed);
    border-radius: 2px;
}

.liste-stock-body[b-ab5t3tjmko] {
    padding: 0;
    overflow-x: auto;
}

/* ── Data table ── */
.table-stock[b-ab5t3tjmko] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    color: var(--ds-text);
}

.table-stock thead[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
}

.table-stock th[b-ab5t3tjmko] {
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ds-text-sub);
    border-bottom: 1px solid var(--ds-border);
    white-space: nowrap;
}

.table-stock td[b-ab5t3tjmko] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ds-border);
    vertical-align: middle;
    color: var(--ds-text);
}

.table-stock tbody tr:last-child td[b-ab5t3tjmko] { border-bottom: none; }

.table-stock tbody tr:hover td[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
}

/* ── Table cell types ── */
.col-actions[b-ab5t3tjmko] { width: 1%; white-space: nowrap; }

.actions-cell[b-ab5t3tjmko] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.action-btn-wrap[b-ab5t3tjmko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.action-label[b-ab5t3tjmko] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ds-text-muted);
}

.btn-action[b-ab5t3tjmko] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--ds-duration) var(--ds-ease);
    background: var(--ds-bg-elevated);
}

.btn-action.btn-supprimer[b-ab5t3tjmko] {
    color: var(--ds-danger);
    border-color: rgba(248, 81, 73, 0.35);
    background: var(--ds-danger-dim);
}

.btn-action.btn-supprimer:hover[b-ab5t3tjmko] {
    background: var(--ds-danger);
    color: #fff;
    border-color: var(--ds-danger);
    transform: scale(1.08);
}

.btn-action.btn-imprimer[b-ab5t3tjmko] {
    color: var(--ds-accent);
    border-color: rgba(47, 129, 247, 0.35);
    background: var(--ds-accent-dim);
}

.btn-action.btn-imprimer:hover[b-ab5t3tjmko] {
    background: var(--ds-accent);
    color: #fff;
    border-color: var(--ds-accent);
    transform: scale(1.08);
}

.btn-action.btn-modifier[b-ab5t3tjmko] {
    color: var(--ds-info);
    border-color: rgba(121, 192, 255, 0.35);
    background: var(--ds-info-dim);
}

.btn-action.btn-modifier:hover[b-ab5t3tjmko],
.btn-action.btn-modifier.active[b-ab5t3tjmko] {
    background: var(--ds-accent);
    color: #fff;
    border-color: var(--ds-accent);
    transform: scale(1.08);
}

.col-marge[b-ab5t3tjmko] { font-weight: 600; color: var(--ds-success); }
.col-marge.negative[b-ab5t3tjmko] { color: var(--ds-danger); }

.col-prix[b-ab5t3tjmko] {
    font-weight: 500;
    color: var(--ds-text);
}

.badge-unite[b-ab5t3tjmko] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--ds-success-dim);
    color: var(--ds-success);
    border: 1px solid rgba(63, 185, 80, 0.25);
}

.badge-type[b-ab5t3tjmko] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.input-quantite[b-ab5t3tjmko] {
    width: 76px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font-size: 0.9rem;
    text-align: center;
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
    transition: border-color var(--ds-duration);
}

.input-quantite:focus[b-ab5t3tjmko] {
    border-color: var(--ds-border-focus);
    outline: none;
    box-shadow: 0 0 0 2px var(--ds-accent-ring);
}

.col-nom[b-ab5t3tjmko] { color: var(--ds-text); }
.col-ref[b-ab5t3tjmko] { min-width: 100px; }

.barcode-cell[b-ab5t3tjmko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.barcode-visual-ref[b-ab5t3tjmko] {
    font-family: var(--ds-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--ds-text-muted);
}

.ref-text[b-ab5t3tjmko] {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--ds-text-sub);
}

.empty-row[b-ab5t3tjmko] {
    padding: 2.5rem 1rem !important;
    color: var(--ds-text-muted);
    font-style: italic;
    text-align: center;
}

/* ── Section cards (Unités / Types) ── */
.section-card[b-ab5t3tjmko] {
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow-sm) !important;
    border: 1px solid var(--ds-border) !important;
    max-width: 1500px;
    width: 100%;
    margin: 1.5rem auto 0;
    background: var(--ds-bg-surface) !important;
    overflow: hidden;
}

.section-unites .section-header[b-ab5t3tjmko],
.section-types .section-header[b-ab5t3tjmko] {
    padding: 1.4rem 1.75rem;
    border-bottom: 1px solid var(--ds-border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ds-bg-elevated);
}

.section-unites .section-header[b-ab5t3tjmko]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, var(--ds-accent), #7c3aed);
    border-radius: 0 2px 2px 0;
}

.section-types .section-header[b-ab5t3tjmko]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
    height: 2px;
    background: linear-gradient(90deg, var(--ds-accent), #7c3aed);
    border-radius: 0 2px 2px 0;
}

.section-title[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ds-text) !important;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
}

.btn-modifier-unites[b-ab5t3tjmko] {
    background: var(--ds-accent);
    color: #fff;
    border: none;
    padding: 0.5rem 1.2rem;
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--ds-duration) var(--ds-ease);
    box-shadow: 0 2px 8px var(--ds-accent-ring);
}

.btn-modifier-unites:hover[b-ab5t3tjmko] {
    background: var(--ds-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ds-accent-ring);
}

.section-body[b-ab5t3tjmko] {
    padding: 1.75rem;
    background: var(--ds-bg-surface);
}

.unites-add-row[b-ab5t3tjmko] {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.btn-ajouter-unite[b-ab5t3tjmko] {
    background: var(--ds-accent);
    color: #fff;
    border: none;
    padding: 0.62rem 1.25rem;
    border-radius: var(--ds-radius-sm);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all var(--ds-duration) var(--ds-ease);
    box-shadow: 0 4px 12px var(--ds-accent-ring);
}

.btn-ajouter-unite:hover[b-ab5t3tjmko] {
    background: var(--ds-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--ds-accent-ring);
}

.nouvelle-unite-block[b-ab5t3tjmko] {
    flex: 1;
    min-width: 260px;
}

.label-nouvelle-unite[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--ds-text-sub);
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
}

.icon-plus[b-ab5t3tjmko] { color: var(--ds-text-muted); font-size: 1rem; }
.icon-plus-blue[b-ab5t3tjmko] { color: var(--ds-accent) !important; }

.input-nouvelle-unite[b-ab5t3tjmko] { max-width: 320px; }

.unites-grid[b-ab5t3tjmko] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.65rem;
}

.types-grid[b-ab5t3tjmko] { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }

.unite-badge[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--ds-bg-elevated);
    border-radius: var(--ds-radius-sm);
    border: 1px solid var(--ds-border);
    font-weight: 500;
    color: var(--ds-text);
    transition: background var(--ds-duration), border-color var(--ds-duration);
}

.unite-badge:hover[b-ab5t3tjmko] {
    background: var(--ds-bg-surface);
    border-color: var(--ds-text-muted);
}

.unite-text[b-ab5t3tjmko] {
    flex: 1;
    text-align: center;
    font-size: 0.92rem;
}

.icon-valid[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    color: var(--ds-success);
}

.type-badge[b-ab5t3tjmko] { justify-content: space-between; }

.icon-tag-small[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
}

/* ── Historique ── */
.historique-section[b-ab5t3tjmko] { margin-top: 1.75rem; }

.historique-card[b-ab5t3tjmko] {
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow-sm) !important;
    border: 1px solid var(--ds-border) !important;
    overflow: hidden;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    background: var(--ds-bg-surface) !important;
}

.historique-header[b-ab5t3tjmko] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border-bottom: none !important;
    padding: 1.2rem 1.5rem !important;
    position: relative;
}

.historique-header[b-ab5t3tjmko]::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: rgba(255,255,255,0.35);
    border-radius: 2px;
}

.historique-title[b-ab5t3tjmko] {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
    display: flex;
    align-items: center;
}

.historique-table[b-ab5t3tjmko] { margin-bottom: 0; }

.historique-table thead[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
    border-bottom: 1px solid var(--ds-border);
}

.historique-table thead th[b-ab5t3tjmko] {
    font-weight: 700;
    color: var(--ds-text-sub);
    padding: 0.85rem 1rem;
    text-transform: uppercase;
    font-size: 0.77rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ds-border);
}

.historique-table tbody td[b-ab5t3tjmko] {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    color: var(--ds-text);
    border-bottom: 1px solid var(--ds-border);
}

/* ── Badge types (history) ── */
.badge-type-ajout[b-ab5t3tjmko] {
    background: var(--ds-success-dim);
    color: var(--ds-success);
    border: 1px solid rgba(63,185,80,.3);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

.badge-type-retrait[b-ab5t3tjmko] {
    background: var(--ds-danger-dim);
    color: var(--ds-danger);
    border: 1px solid rgba(248,81,73,.3);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

.badge-type-modification[b-ab5t3tjmko] {
    background: var(--ds-accent-dim);
    color: var(--ds-accent);
    border: 1px solid rgba(249,115,22,.3);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

.badge-type-création[b-ab5t3tjmko] {
    background: rgba(124,58,237,.12);
    color: #a78bfa;
    border: 1px solid rgba(124,58,237,.3);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

.badge-type-suppression[b-ab5t3tjmko] {
    background: var(--ds-danger-dim);
    color: var(--ds-danger);
    border: 1px solid rgba(248,81,73,.3);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

.badge-type-default[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
    color: var(--ds-text-sub);
    border: 1px solid var(--ds-border);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
}

/* ── Modal overlay ── */
.modal-overlay[b-ab5t3tjmko] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(4px);
}

/* ── Modal: unités / types ── */
.modal-modifier-unites[b-ab5t3tjmko] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-lg);
    min-width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-modifier-header[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-bg-elevated);
    border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
}

.modal-modifier-title[b-ab5t3tjmko] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ds-text);
}

.btn-close-modal[b-ab5t3tjmko] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ds-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--ds-radius-sm);
    transition: all var(--ds-duration);
}

.btn-close-modal:hover[b-ab5t3tjmko] {
    background: var(--ds-bg-surface);
    color: var(--ds-text);
}

.modal-modifier-body[b-ab5t3tjmko] {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.unites-list-modifier[b-ab5t3tjmko] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.unite-item-modifier[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    transition: all var(--ds-duration);
}

.unite-item-modifier:hover[b-ab5t3tjmko] {
    background: var(--ds-bg-surface);
    border-color: var(--ds-text-muted);
}

.unite-name-modifier[b-ab5t3tjmko] {
    font-weight: 600;
    color: var(--ds-text);
    font-size: 0.92rem;
}

.btn-supprimer-modifier[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(248, 81, 73, 0.3);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-danger-dim);
    color: var(--ds-danger);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ds-duration);
}

.btn-supprimer-modifier:hover[b-ab5t3tjmko] {
    background: var(--ds-danger);
    color: #fff;
    border-color: var(--ds-danger);
    transform: scale(1.02);
}

.empty-message[b-ab5t3tjmko] {
    text-align: center;
    color: var(--ds-text-muted);
    padding: 2rem 1rem;
    margin: 0;
    font-style: italic;
}

.modal-modifier-footer[b-ab5t3tjmko] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg-elevated);
    border-radius: 0 0 var(--ds-radius-xl) var(--ds-radius-xl);
}

.btn-modal-fermer[b-ab5t3tjmko] {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-surface);
    color: var(--ds-text-sub);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ds-duration);
}

.btn-modal-fermer:hover[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
    border-color: var(--ds-text-muted);
}

/* ── Modal: modifier produit ── */
.modal-modifier-produit[b-ab5t3tjmko] {
    background: var(--ds-bg-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-lg);
    min-width: 520px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-modifier-produit-header[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-bg-elevated);
    border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
}

.modal-modifier-produit-header .btn-close-modal[b-ab5t3tjmko] {
    order: -1;
    margin-right: auto;
}

.modal-modifier-produit-title[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ds-text);
}

.modal-modifier-produit-body[b-ab5t3tjmko] {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    background: var(--ds-bg-surface);
}

.form-label-modal[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ds-text-sub);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.form-label-modal .label-icon[b-ab5t3tjmko] { color: var(--ds-text-muted); }
.form-label-modal .label-icon.barcode[b-ab5t3tjmko] { color: var(--ds-text-muted); font-weight: 700; }

.form-control-modal[b-ab5t3tjmko] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    font-size: 0.9rem;
    color: var(--ds-text);
    background: var(--ds-bg-elevated);
    transition: border-color var(--ds-duration), box-shadow var(--ds-duration);
}

.form-control-modal:focus[b-ab5t3tjmko] {
    border-color: var(--ds-border-focus);
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-accent-ring);
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
}

select.form-control-modal[b-ab5t3tjmko] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

select.form-control-modal option[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
}

.modal-stock-section[b-ab5t3tjmko] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ds-border);
}

.modal-stock-title[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ds-text);
}

.modal-stock-btns[b-ab5t3tjmko] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-modal-retirer[b-ab5t3tjmko] {
    padding: 0.48rem 1rem;
    border: 1px solid rgba(248, 81, 73, 0.3);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-danger-dim);
    color: var(--ds-danger);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--ds-duration);
}

.btn-modal-retirer:hover[b-ab5t3tjmko] {
    background: var(--ds-danger);
    color: #fff;
    border-color: var(--ds-danger);
    transform: translateY(-1px);
}

.btn-modal-ajouter[b-ab5t3tjmko] {
    padding: 0.48rem 1rem;
    border: 1px solid rgba(63, 185, 80, 0.3);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-success-dim);
    color: var(--ds-success);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--ds-duration);
}

.btn-modal-ajouter:hover[b-ab5t3tjmko] {
    background: var(--ds-success);
    color: #fff;
    border-color: var(--ds-success);
    transform: translateY(-1px);
}

.modal-stock-hint[b-ab5t3tjmko] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0 0 0;
    font-size: 0.8rem;
    color: var(--ds-text-muted);
}

.modal-stock-hint svg[b-ab5t3tjmko] {
    flex-shrink: 0;
    color: var(--ds-warning);
}

.modal-modifier-produit-footer[b-ab5t3tjmko] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-bg-elevated);
    border-radius: 0 0 var(--ds-radius-xl) var(--ds-radius-xl);
}

.btn-modal-enregistrer[b-ab5t3tjmko] {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--ds-duration);
    box-shadow: 0 4px 12px var(--ds-accent-ring);
}

.btn-modal-enregistrer:hover[b-ab5t3tjmko] {
    background: var(--ds-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--ds-accent-ring);
}

.btn-modal-annuler-produit[b-ab5t3tjmko] {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-bg-surface);
    color: var(--ds-text-sub);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--ds-duration);
}

.btn-modal-annuler-produit:hover[b-ab5t3tjmko] {
    background: var(--ds-bg-elevated);
    border-color: var(--ds-text-muted);
    color: var(--ds-text);
}

/* ── Product image thumbnail ── */
img[alt][b-ab5t3tjmko] {
    border: 1px solid var(--ds-border) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .stock-produit-container[b-ab5t3tjmko] { padding: 1rem; }
    .produit-form-body[b-ab5t3tjmko] { padding: 1.25rem; }
    .form-actions[b-ab5t3tjmko] { flex-direction: column; }
    .btn-ajouter[b-ab5t3tjmko], .btn-vider[b-ab5t3tjmko] { width: 100%; }
    .input-with-btn[b-ab5t3tjmko] { flex-direction: column; border: none; }
    .input-with-btn .form-control-custom[b-ab5t3tjmko] { border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius-sm) !important; }
    .input-with-btn .btn-icon[b-ab5t3tjmko] { border-radius: var(--ds-radius-sm) !important; }
    .filter-search-body[b-ab5t3tjmko] { flex-direction: column; align-items: stretch; }
    .btn-recharger[b-ab5t3tjmko], .btn-scan-filter[b-ab5t3tjmko] { width: 100%; justify-content: center; }
    .form-control-filter[b-ab5t3tjmko], .search-input-wrap .search-input[b-ab5t3tjmko] { min-width: unset; width: 100%; }
    .unites-add-row[b-ab5t3tjmko] { flex-direction: column; align-items: stretch; }
    .nouvelle-unite-block[b-ab5t3tjmko] { min-width: unset; }
    .input-nouvelle-unite[b-ab5t3tjmko] { max-width: none; }
    .unites-grid[b-ab5t3tjmko] { grid-template-columns: repeat(2, 1fr); }
    .modal-modifier-unites[b-ab5t3tjmko], .modal-modifier-produit[b-ab5t3tjmko] { min-width: 90vw; }
}
/* /Pages/Transferts.razor.rz.scp.css */
/* ═══════════════ VOLCHIC — Transferts de Stock ═══════════════ */
.tr-page[b-oxdwxoa91f] { padding:1.25rem; max-width:1400px; }
.tr-header[b-oxdwxoa91f] { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.25rem; }
.tr-title[b-oxdwxoa91f]  { font-size:1.4rem; font-weight:700; color:var(--ds-text); margin:0; }
.tr-sub[b-oxdwxoa91f]    { font-size:.75rem; color:var(--ds-text-muted); margin:.2rem 0 0; }
.tr-header-stats[b-oxdwxoa91f] { display:flex; gap:.6rem; flex-wrap:wrap; }
.tr-stat[b-oxdwxoa91f] { display:flex; align-items:center; gap:.4rem; padding:.3rem .8rem; border-radius:20px; font-size:.76rem; font-weight:600; }
.tr-stat.orange[b-oxdwxoa91f] { background:rgba(249,115,22,.1); color:#f97316; border:1px solid rgba(249,115,22,.2); }
.tr-stat.blue[b-oxdwxoa91f]   { background:rgba(251,146,60,.1);  color:#fb923c; border:1px solid rgba(251,146,60,.2); }
.tr-stat.red[b-oxdwxoa91f]    { background:rgba(248,113,113,.1); color:#f87171; border:1px solid rgba(248,113,113,.2); }

/* Tabs */
.tr-tabs[b-oxdwxoa91f] { display:flex; gap:.4rem; background:var(--ds-bg-app); border:1px solid var(--ds-border); border-radius:12px; padding:.3rem; margin-bottom:1.5rem; width:fit-content; }
.tr-tab[b-oxdwxoa91f]  { padding:.42rem 1rem; border-radius:8px; border:none; background:transparent; color:var(--ds-text-muted); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .14s; display:flex; align-items:center; }
.tr-tab:hover[b-oxdwxoa91f]  { background:rgba(255,255,255,.05); color:var(--ds-text-sub); }
.tr-tab.active[b-oxdwxoa91f] { background:rgba(249,115,22,.15); color:#f97316; }

/* Form layout */
.tr-form-layout[b-oxdwxoa91f] { display:grid; grid-template-columns:1fr 340px; gap:1.25rem; align-items:start; }
@media (max-width:1100px) { .tr-form-layout[b-oxdwxoa91f] { grid-template-columns:1fr; } }

/* Card */
.tr-form-card[b-oxdwxoa91f] { background:var(--ds-bg-elevated); border:1px solid var(--ds-border); border-radius:14px; overflow:hidden; }
.tr-card-head[b-oxdwxoa91f] { display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--ds-border); font-size:.88rem; font-weight:600; color:var(--ds-text); }
.tr-form-body[b-oxdwxoa91f] { padding:1.1rem; display:flex; flex-direction:column; gap:.85rem; }
.tr-card-foot[b-oxdwxoa91f] { display:flex; justify-content:flex-end; gap:.5rem; padding:.85rem 1.1rem; border-top:1px solid var(--ds-border); background:rgba(0,0,0,.12); }

/* Fields */
.tr-field[b-oxdwxoa91f] { display:flex; flex-direction:column; gap:.35rem; }
.tr-label[b-oxdwxoa91f] { font-size:.63rem; font-weight:700; color:var(--ds-text-muted); text-transform:uppercase; letter-spacing:.08em; }
.tr-input[b-oxdwxoa91f],.tr-select[b-oxdwxoa91f] { background:var(--ds-bg-app); border:1px solid var(--ds-border); border-radius:9px; padding:.6rem .85rem; font-size:.84rem; color:var(--ds-text); outline:none; transition:border-color .13s; width:100%; }
.tr-input:focus[b-oxdwxoa91f],.tr-select:focus[b-oxdwxoa91f] { border-color:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.1); }
.tr-select option[b-oxdwxoa91f] { background:var(--ds-bg-app); }

/* Type buttons */
.tr-type-btns[b-oxdwxoa91f] { display:flex; gap:.4rem; flex-wrap:wrap; }
.tr-type-btn[b-oxdwxoa91f] { padding:.38rem .85rem; border-radius:8px; border:1px solid var(--ds-border); background:transparent; color:var(--ds-text-muted); font-size:.8rem; font-weight:600; cursor:pointer; display:flex; align-items:center; transition:all .13s; }
.tr-type-btn:hover[b-oxdwxoa91f]  { border-color:#f97316; color:#f97316; }
.tr-type-btn.active[b-oxdwxoa91f] { background:rgba(249,115,22,.12); border-color:#f97316; color:#f97316; }

/* Quantity controls */
.tr-qty-wrap[b-oxdwxoa91f] { display:flex; align-items:center; gap:.4rem; }
.tr-qty-btn[b-oxdwxoa91f] { width:38px; height:38px; border-radius:8px; border:1px solid var(--ds-border); background:transparent; color:var(--ds-text-sub); font-size:1.1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.tr-qty-btn:hover[b-oxdwxoa91f] { border-color:#f97316; color:#f97316; }
.tr-qty-input[b-oxdwxoa91f] { flex:1; text-align:center; background:var(--ds-bg-app); border:1px solid var(--ds-border); border-radius:8px; padding:.5rem; font-size:1.1rem; font-weight:700; color:#f97316; outline:none; }
.tr-qty-input:focus[b-oxdwxoa91f] { border-color:#f97316; }
.tr-quick-btns[b-oxdwxoa91f] { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.3rem; }
.tr-quick-btn[b-oxdwxoa91f] { padding:.25rem .6rem; border-radius:6px; border:1px solid var(--ds-border); background:transparent; color:var(--ds-text-muted); font-size:.72rem; font-weight:600; cursor:pointer; transition:all .12s; }
.tr-quick-btn:hover[b-oxdwxoa91f]  { border-color:#f97316; color:#f97316; }
.tr-quick-btn.active[b-oxdwxoa91f] { background:rgba(249,115,22,.12); border-color:#f97316; color:#f97316; }

/* HQ stock preview */
.tr-hq-stock-preview[b-oxdwxoa91f] { background:var(--ds-bg-app); border:1px solid var(--ds-border); border-radius:9px; padding:.6rem .85rem; font-size:.8rem; color:var(--ds-text-muted); display:flex; align-items:center; }

/* Alerts */
.tr-alert[b-oxdwxoa91f] { padding:.6rem .85rem; border-radius:9px; font-size:.78rem; font-weight:500; display:flex; align-items:center; }
.tr-alert.error[b-oxdwxoa91f]   { background:rgba(248,113,113,.08); color:#f87171; border:1px solid rgba(248,113,113,.2); }
.tr-alert.success[b-oxdwxoa91f] { background:rgba(52,211,153,.08);  color:#34d399; border:1px solid rgba(52,211,153,.2); }

/* Execute button */
.tr-btn-execute[b-oxdwxoa91f] { padding:.65rem 1.5rem; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; border:none; border-radius:10px; font-size:.9rem; font-weight:700; cursor:pointer; display:flex; align-items:center; box-shadow:0 4px 14px rgba(249,115,22,.3); transition:all .15s; }
.tr-btn-execute:hover:not(:disabled)[b-oxdwxoa91f] { filter:brightness(1.1); transform:translateY(-1px); }
.tr-btn-execute:disabled[b-oxdwxoa91f] { opacity:.4; cursor:not-allowed; }

/* Spinner */
.tr-spinner[b-oxdwxoa91f] { width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin-b-oxdwxoa91f .6s linear infinite; margin-right:.5rem; }
@keyframes spin-b-oxdwxoa91f { to { transform:rotate(360deg); } }

/* Preview panel */
.tr-preview-panel[b-oxdwxoa91f] { background:var(--ds-bg-elevated); border:1px solid var(--ds-border); border-radius:14px; overflow:hidden; }
.tr-preview-body[b-oxdwxoa91f]  { padding:1rem; }
.tr-flow[b-oxdwxoa91f]          { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.5rem 0; }
.tr-flow-box[b-oxdwxoa91f] { background:var(--ds-bg-app); border:2px solid var(--ds-border); border-radius:12px; padding:.85rem 1.1rem; text-align:center; width:100%; }
.tr-flow-box.hq[b-oxdwxoa91f]      { border-color:rgba(251,146,60,.3); }
.tr-flow-box i[b-oxdwxoa91f]       { font-size:1.3rem; display:block; margin-bottom:.35rem; color:#fb923c; }
.tr-flow-box.boutique i[b-oxdwxoa91f] { color:inherit; }
.tr-flow-name[b-oxdwxoa91f]  { font-size:.82rem; font-weight:600; color:var(--ds-text); }
.tr-flow-stock[b-oxdwxoa91f] { font-size:1rem; font-weight:800; margin-top:.2rem; color:#f97316; }
.tr-flow-arrow[b-oxdwxoa91f] { font-size:.75rem; color:#f87171; margin-top:.15rem; }
.tr-flow-line[b-oxdwxoa91f]  { width:2px; height:20px; background:var(--ds-border); }
.tr-preview-after[b-oxdwxoa91f] { font-size:.78rem; color:var(--ds-text-muted); text-align:center; padding:.5rem 0; border-top:1px solid var(--ds-border); margin-top:.5rem; }
.tr-recent-head[b-oxdwxoa91f]  { font-size:.63rem; font-weight:700; color:var(--ds-text-muted); text-transform:uppercase; letter-spacing:.07em; padding:.6rem 1rem .35rem; border-top:1px solid var(--ds-border); margin-top:.5rem; }
.tr-recent-item[b-oxdwxoa91f]  { display:flex; justify-content:space-between; align-items:center; padding:.4rem 1rem; font-size:.75rem; color:var(--ds-text-muted); border-bottom:1px solid var(--ds-bg-surface); }

/* Filters */
.tr-filters[b-oxdwxoa91f] { display:flex; gap:.65rem; margin-bottom:1rem; flex-wrap:wrap; }
.tr-search[b-oxdwxoa91f]  { flex:1; min-width:180px; background:var(--ds-bg-app); border:1px solid var(--ds-border); border-radius:9px; padding:.45rem .85rem; font-size:.82rem; color:var(--ds-text); outline:none; }
.tr-search:focus[b-oxdwxoa91f] { border-color:#f97316; }

/* Table */
.tr-table-wrap[b-oxdwxoa91f] { background:var(--ds-bg-elevated); border:1px solid var(--ds-border); border-radius:14px; overflow:hidden; }
.tr-table[b-oxdwxoa91f] { width:100%; border-collapse:collapse; font-size:.79rem; }
.tr-table th[b-oxdwxoa91f] { padding:.62rem 1rem; background:var(--ds-bg-app); color:var(--ds-text-muted); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--ds-border); text-align:left; white-space:nowrap; }
.tr-table td[b-oxdwxoa91f] { padding:.62rem 1rem; color:var(--ds-text-sub); border-bottom:1px solid var(--ds-bg-surface); vertical-align:middle; }
.tr-table tbody tr:hover[b-oxdwxoa91f] { background:rgba(255,255,255,.02); }
.tr-code[b-oxdwxoa91f] { font-family:monospace; font-size:.7rem; background:rgba(249,115,22,.1); color:#f97316; padding:.12rem .4rem; border-radius:5px; }
.tr-boutique-tag[b-oxdwxoa91f] { display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:7px; border:1px solid; font-size:.72rem; font-weight:600; }
.tr-type-tag[b-oxdwxoa91f] { background:rgba(167,139,250,.1); color:#a78bfa; padding:.12rem .45rem; border-radius:5px; font-size:.7rem; font-weight:600; }
.tr-qty-badge[b-oxdwxoa91f] { background:rgba(52,211,153,.12); color:#34d399; padding:.12rem .5rem; border-radius:5px; font-size:.78rem; font-weight:700; }
.tr-icon-btn[b-oxdwxoa91f]  { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; border:none; font-size:.78rem; cursor:pointer; }
.tr-icon-btn.red[b-oxdwxoa91f] { background:rgba(248,113,113,.12); color:#f87171; }
.tr-icon-btn:hover[b-oxdwxoa91f] { filter:brightness(1.3); }

/* Empty */
.tr-empty[b-oxdwxoa91f] { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:2.5rem; color:var(--ds-text-muted); font-size:.82rem; text-align:center; }
.text-orange[b-oxdwxoa91f] { color:#f97316; } .text-green[b-oxdwxoa91f] { color:#34d399; } .text-blue[b-oxdwxoa91f] { color:#fb923c; } .text-red[b-oxdwxoa91f] { color:#f87171; }
/* /Pages/Utilisateurs.razor.rz.scp.css */
/* ═══ Gabarit aligné sur Pages/Permissions.razor.css (perm-*) + cartes / tiroir bq-* ═══ */

.perm-user-panel[b-6chwibl5it] {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-elevated, #252119);
}

.perm-user-row[b-6chwibl5it] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
}

.perm-user-field-label[b-6chwibl5it] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ds-text-muted, #9c948a);
    flex-shrink: 0;
}

.perm-user-search[b-6chwibl5it] {
    flex: 1;
    min-width: 160px;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
    color: var(--ds-text, #fefdfb);
    font-size: 0.86rem;
    outline: none;
}

.perm-user-search:focus[b-6chwibl5it] {
    border-color: var(--ds-border-focus, #fb923c);
}

.perm-user-hint[b-6chwibl5it] {
    margin: 0.65rem 0 0;
    font-size: 0.78rem;
    color: var(--ds-text-muted, #9c948a);
    line-height: 1.45;
}

.perm-shell[b-6chwibl5it] {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
    font-family: var(--ds-font-sans, "Inter", system-ui, sans-serif);
    color: var(--ds-text, #fefdfb);
}

.perm-shell--wide[b-6chwibl5it] {
    max-width: 1200px;
}

.perm-head[b-6chwibl5it] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.perm-title[b-6chwibl5it] {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.35rem;
    color: var(--ds-text, #fefdfb);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.perm-title-icon[b-6chwibl5it] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ds-accent, #f97316), var(--ds-accent-active, #ea580c));
    color: var(--ds-text-inverse, #fff);
    font-size: 1.2rem;
    box-shadow: var(--ds-glow-sm, 0 0 20px rgba(249, 115, 22, 0.22));
}

.perm-lead[b-6chwibl5it] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ds-text-muted, #9c948a);
    max-width: 52ch;
}

.perm-code[b-6chwibl5it] {
    font-size: 0.85em;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    background: var(--ds-accent-dim, rgba(249, 115, 22, 0.12));
    border: 1px solid var(--ds-border, #3d342c);
    color: var(--ds-accent, #f97316);
}

.perm-link[b-6chwibl5it] {
    color: var(--ds-accent, #f97316);
    font-weight: 700;
    text-decoration: none;
}
.perm-link:hover[b-6chwibl5it] {
    text-decoration: underline;
}

.perm-head-actions[b-6chwibl5it] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.perm-btn-primary[b-6chwibl5it] {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--ds-text-inverse, #fff);
    background: linear-gradient(135deg, var(--ds-accent, #f97316), var(--ds-accent-active, #ea580c));
    box-shadow: var(--ds-glow-sm, 0 0 20px rgba(249, 115, 22, 0.22));
    border: none;
    white-space: nowrap;
    cursor: pointer;
}
.perm-btn-primary:hover:not(:disabled)[b-6chwibl5it] {
    filter: brightness(1.06);
    color: var(--ds-text-inverse, #fff);
}
.perm-btn-primary:disabled[b-6chwibl5it] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
}

.perm-btn-ghost[b-6chwibl5it] {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-elevated, #252119);
    color: var(--ds-text, #fefdfb);
    cursor: pointer;
}
.perm-btn-ghost:hover:not(:disabled)[b-6chwibl5it] {
    border-color: var(--ds-border-focus, #fb923c);
    filter: brightness(1.04);
}
.perm-btn-ghost:disabled[b-6chwibl5it] {
    opacity: 0.55;
    cursor: not-allowed;
}
.perm-btn-ghost .spinner-border[b-6chwibl5it] {
    border-color: rgba(100, 116, 139, 0.35);
    border-right-color: #f97316;
}

.perm-stats[b-6chwibl5it] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.perm-stat[b-6chwibl5it] {
    flex: 1;
    min-width: 120px;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: var(--ds-bg-elevated, #252119);
    border: 1px solid var(--ds-border, #3d342c);
    text-align: center;
}

.perm-stat--total[b-6chwibl5it] {
    border-color: var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
}

.perm-stat--ok[b-6chwibl5it] {
    border-color: var(--ds-success, #3fb950);
    background: var(--ds-success-dim, rgba(63, 185, 80, 0.12));
}

.perm-stat--jwt[b-6chwibl5it] {
    border-color: var(--ds-accent, #f97316);
    background: var(--ds-info-dim, rgba(251, 146, 60, 0.12));
}

.perm-stat-val[b-6chwibl5it] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ds-text, #fefdfb);
}

.perm-stat-lbl[b-6chwibl5it] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-text-muted, #9c948a);
}

.perm-stat--ok .perm-stat-lbl[b-6chwibl5it] {
    color: var(--ds-success, #3fb950);
}
.perm-stat--jwt .perm-stat-lbl[b-6chwibl5it] {
    color: var(--ds-info, #fb923c);
}

.perm-feedback[b-6chwibl5it] {
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

.perm-feedback--ok[b-6chwibl5it] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(74, 222, 128, 0.35);
    color: #bbf7d0;
}

.perm-no-result[b-6chwibl5it] {
    text-align: center;
    color: var(--ds-text-muted, #9c948a);
    padding: 2rem;
    font-size: 0.95rem;
}

.usu-cards-wrap[b-6chwibl5it] {
    margin: 0;
    padding: 0.35rem 0.25rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--ds-border, #3d342c);
    background: var(--ds-bg-surface, #1c1916);
}

.usu-cards-grid[b-6chwibl5it] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* ── Cartes & tiroir (inchangé logique, classes historiques bq-*) ── */
.bq-input[b-6chwibl5it] {
    width: 100%;
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    padding: 0.55rem 0.85rem;
    font-size: 0.84rem;
    color: var(--ds-text);
    outline: none;
    transition: border-color 0.13s;
}
.bq-input:focus[b-6chwibl5it] { border-color: #f97316; }

.bq-store-card[b-6chwibl5it] {
    background: var(--ds-bg-elevated);
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.18s;
    position: relative;
}
.bq-store-card:hover[b-6chwibl5it] { border-color: var(--ds-text-muted); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.bq-store-accent[b-6chwibl5it] { height: 3px; position: absolute; top: 0; left: 0; right: 0; }
.bq-store-head[b-6chwibl5it] { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1rem 0.6rem; }
.bq-store-avatar[b-6chwibl5it] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
}
.bq-store-name[b-6chwibl5it] { font-size: 0.92rem; font-weight: 700; color: var(--ds-text); }
.bq-store-code[b-6chwibl5it] { font-size: 0.68rem; color: var(--ds-text-muted); margin-top: 0.1rem; }
.bq-store-status[b-6chwibl5it] { font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; }
.bq-store-status.active[b-6chwibl5it] { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.bq-store-status.inactive[b-6chwibl5it] { background: rgba(107, 114, 128, 0.12); color: #6b7280; }
.bq-store-stats[b-6chwibl5it] { display: flex; gap: 0.75rem; padding: 0.4rem 1rem; }
.bq-store-stat[b-6chwibl5it] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.73rem; color: var(--ds-text-muted); }
.bq-store-flacons[b-6chwibl5it] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0 1rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
}
.bq-store-foot[b-6chwibl5it] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ds-bg-surface);
    flex-wrap: wrap;
    align-items: center;
}

.bq-action-btn[b-6chwibl5it] {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: none;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.13s;
}
.bq-action-btn.orange[b-6chwibl5it] {
    background: rgba(251, 146, 60, 0.12);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.28);
}
.bq-action-btn.danger[b-6chwibl5it] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.bq-action-btn:hover:not(:disabled)[b-6chwibl5it] { filter: brightness(1.2); }
.bq-action-btn:disabled[b-6chwibl5it] { opacity: 0.45; cursor: not-allowed; filter: none; }

/* ── Spécifique page Utilisateurs ── */
.usu-code[b-6chwibl5it] {
    font-size: 0.78em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(249, 115, 22, 0.12);
    color: #fdba74;
}
.usu-hint[b-6chwibl5it] {
    margin: 0.65rem 0 0;
    font-size: 0.72rem;
    color: var(--ds-text-muted);
    line-height: 1.4;
}
.usu-user-card.bq-store-card[b-6chwibl5it] { cursor: default; }
.usu-user-card.bq-store-card:hover[b-6chwibl5it] { transform: none; }
.usu-spotlight[b-6chwibl5it] {
    border-color: rgba(249, 115, 22, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.22);
}
.usu-login-code[b-6chwibl5it] {
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.usu-ref-badge[b-6chwibl5it] {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(251, 191, 36, 0.35);
}
.usu-avatar-letters[b-6chwibl5it] { color: var(--ds-text); letter-spacing: 0.02em; }

/* Tiroir édition (aligné Boutiques) */
.bq-drawer-overlay[b-6chwibl5it] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: flex;
    justify-content: flex-end;
}
.bq-drawer[b-6chwibl5it] {
    width: 460px;
    max-width: 95vw;
    background: var(--ds-bg-app);
    border-left: 1px solid var(--ds-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    animation: usu-slide-in-b-6chwibl5it 0.22s ease;
}
@keyframes usu-slide-in-b-6chwibl5it {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}
.bq-drawer-head[b-6chwibl5it] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--ds-border);
    position: sticky;
    top: 0;
    background: var(--ds-bg-app);
    z-index: 1;
}
.bq-drawer-title[b-6chwibl5it] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ds-text);
}
.bq-drawer-code[b-6chwibl5it] {
    font-size: 0.7rem;
    color: var(--ds-text-muted);
    margin-top: 0.15rem;
}
.bq-close-btn[b-6chwibl5it] {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--ds-border);
    background: transparent;
    color: var(--ds-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bq-drawer-body[b-6chwibl5it] {
    padding: 1.1rem 1.25rem;
    flex: 1;
    overflow-y: auto;
}
.bq-drawer-foot[b-6chwibl5it] {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--ds-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.bq-form-field[b-6chwibl5it] {
    margin-bottom: 0.9rem;
}
.bq-form-field label[b-6chwibl5it] {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.35rem;
}
.bq-btn-sm[b-6chwibl5it] {
    padding: 0.38rem 0.8rem;
    border-radius: 8px;
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.13s;
}
.bq-btn-sm.green[b-6chwibl5it] {
    background: linear-gradient(135deg, #34d399, #059669);
    color: #fff;
}
.bq-btn-sm.secondary[b-6chwibl5it] {
    background: transparent;
    border: 1px solid var(--ds-border);
    color: var(--ds-text-muted);
}
.bq-btn-sm:hover:not(:disabled)[b-6chwibl5it] {
    filter: brightness(1.15);
}
.bq-btn-sm:disabled[b-6chwibl5it] {
    opacity: 0.5;
    cursor: not-allowed;
}
.usu-drawer-error[b-6chwibl5it] {
    font-size: 0.78rem;
    color: #f87171;
    margin-bottom: 0.75rem;
}

.usu-perm-section[b-6chwibl5it] {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
    border-left: 4px solid #f97316;
    background: var(--ds-bg-elevated);
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.08);
}
.usu-perm-section-head[b-6chwibl5it] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.5rem;
}
.usu-perm-badge[b-6chwibl5it] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.45rem;
    border-radius: 6px;
    background: rgba(249, 115, 22, 0.18);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.35);
}
.usu-perm-section-title[b-6chwibl5it] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ds-text-muted);
    margin: 0;
}
.usu-perm-group-title[b-6chwibl5it] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ds-text);
    margin-bottom: 0.5rem;
}
.usu-checkbox-row[b-6chwibl5it] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ds-text);
}
.usu-checkbox-row input[b-6chwibl5it] {
    margin-top: 0.15rem;
    width: 1rem;
    height: 1rem;
    accent-color: #f97316;
    flex-shrink: 0;
}

.usu-perm-lead[b-6chwibl5it] {
    font-size: 0.78rem;
    color: var(--ds-text-muted);
    margin: 0 0 0.75rem;
    line-height: 1.45;
}

.usu-pnav-sector[b-6chwibl5it] {
    margin-top: 0.65rem;
    padding: 0.5rem 0.45rem 0.35rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.usu-pnav-sector:first-of-type[b-6chwibl5it] {
    margin-top: 0.25rem;
}

.usu-pnav-sector-head[b-6chwibl5it] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.35rem;
    padding: 0 0.15rem;
}

.usu-pnav-dot[b-6chwibl5it] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.usu-pnav-sector-title[b-6chwibl5it] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #fb923c;
    flex: 1;
    min-width: 0;
}

.usu-pnav-bulk[b-6chwibl5it] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.usu-pnav-bulk-btn[b-6chwibl5it] {
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    border: 1px solid var(--ds-border);
    background: var(--ds-bg-app);
    color: var(--ds-text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.usu-pnav-bulk-btn:hover:not(:disabled)[b-6chwibl5it] {
    border-color: #f97316;
    color: #fdba74;
}
.usu-pnav-bulk-btn:disabled[b-6chwibl5it] {
    opacity: 0.45;
    cursor: not-allowed;
}

.usu-pnav-sector-body[b-6chwibl5it] {
    padding: 0.1rem 0 0;
}

.usu-pnav-row[b-6chwibl5it] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.4rem 0.32rem 0.35rem;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 1px;
    min-height: 2rem;
}
.usu-pnav-row:hover[b-6chwibl5it] {
    background: rgba(255, 255, 255, 0.06);
}

.usu-pnav-ico[b-6chwibl5it] {
    width: 1.35rem;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 250, 245, 0.72);
    flex-shrink: 0;
}

.usu-pnav-label[b-6chwibl5it] {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ds-text);
    line-height: 1.25;
}

.usu-pnav-check[b-6chwibl5it] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #f97316;
    flex-shrink: 0;
    cursor: pointer;
}